如何使用Highcharts创建单个系列条形图

I'm trying to create a simple Highcharts bar graph with a single series and multiple labels in the legend. How is this done?

我正在尝试使用图例中的单个系列和多个标签创建一个简单的Highcharts条形图。这是怎么做到的?

Here is an example: http://jsfiddle.net/jwerre/3g30q4L5/5/

这是一个例子:http://jsfiddle.net/jwerre/3g30q4L5/5/

    $('#container').highcharts({

    chart: {
        type: 'bar',
    },
    legend: {
        enabled: true,
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        labelFormatter: function() {
            return this.name + " - <span class='total'>"+this.y+"</span>"
        }
    },
    title: {
        text: 'Simple Bar Graph'
    },
    xAxis: {
        categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
        allowDecimals: false
    },
    yAxis: {
        allowDecimals: false
    },

    series: [
        {
            data: [
                {y: 6, name: 'First', color: 'blue'},
                {y: 7, name: 'Second', color: 'green'},
                {y: 9, name: 'Third', color: 'yellow'},
                {y: 1, name: 'Fourth', color: 'orange'},
                {y: 1, name: 'Fifth', color: 'red'}
            ]
        }
    ],

});

1 个解决方案

#1

Luckily, Highcharts is pretty flexible. We can do some tricks (maybe hacks?) to achieve this kind of "non-convential" tasks.

幸运的是,Highcharts非常灵活。我们可以做一些技巧(可能是黑客?)来实现这种“非常规”任务。

What you could do in your case is create "fake" serieses, and use custom event handlers:

在你的情况下你可以做的是创建“假”系列,并使用自定义事件处理程序:

    series: [
        {
            pointWidth:20,
            color: colors[0],
            showInLegend:false,
            data: [
                {y: 6, name: 'First', color: colors[0]},
                {y: 7, name: 'Second', color: colors[1]},
                {y: 9, name: 'Third', color: colors[2]},
                {y: 1, name: 'Fourth', color: colors[3]},
                {y: 1, name: 'Fifth', color: colors[4]}
            ]
        },
        {color: 'blue'},
        {color: 'green'},
        {color: 'yellow'},
        {color: 'orange'},
        {color: 'red'}

    ],

In order to format the legend labels we can use labelFormatter for the legend:

为了格式化图例标签,我们可以使用labelFormatter作为图例:

    legend: {
        labelFormatter: function(){
            return names[this.index-1];
        }
    },

this will set the legend label to the name of the corresponding point.

这会将图例标签设置为相应点的名称。

And finally we need to handle the legend click, to imitate the "normal" behaviour:

最后我们需要处理图例点击,模仿“正常”行为:

    plotOptions: {
        series: {
            events: {
                legendItemClick: function (x) {
                    var i = this.index  - 1;
                    var series = this.chart.series[0];
                    var point = series.points[i];   

                    if(point.oldY == undefined)
                       point.oldY = point.y;

                    point.update({y: point.y != null ? null : point.oldY});
                }
            }
        }
    },

These are just examples, you can obviously improve this and adjust to your own need.

这些只是示例,您可以明显改善这一点,并根据自己的需要进行调整。

Good Luck!

http://jsfiddle.net/otm0oq2c/3/

#1