Question

我试图在图例中创建一个简单的Highcharts条形图，其中包含一个系列和多个标签。这是怎么做到的？

以下是一个示例：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'}
            ]
        }
    ],

});

Answer 1

幸运的是，Highcharts非常灵活。我们可以做一些技巧（可能是黑客？）来实现这种非常规的＆＃34;非常规的＆＃34;任务。

你可以做的是创造＆＃34;假＆＃34;系列，并使用自定义事件处理程序：

    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'}

    ],

为了设置图例标签的格式，我们可以使用labelFormatter作为图例：

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

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

最后我们需要处理传奇点击，模仿＆＃34;正常＆＃34;行为：

    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});
                }
            }
        }
    },

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

祝你好运！

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

Answer 2

比接受的答案更简单的方法是将categories键设置为“标签”数组，将series.data设置为“值”数组。

下面是一个使用集合（对象数组）或平面对象在Highcharts（jsfiddle）中填充条形图的示例：

该示例假定一个具有键名称/值的对象数组，或者一个简单的键/值对象：

var chart = Highcharts.chart('container', {

    title: {
        text: 'Simple Bar'
    },

    chart: {type: 'bar'},

     xAxis: {
     // categories: Object.keys(obj)
     // or
        categories: collection.map(i => i.name)
    }, 

        series: [{
        name: 'Usage',
        colorByPoint: true,
     // data: Object.values(obj)
     // or:
        data: collection.map(i => i.value)
    }],
    legend: false
});

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

2 个答案: