高图:将系列值动态添加到类别名称

时间:2018-07-17 02:58:36

标签: javascript highcharts

使用简单的高图表条形图,例如:http://jsfiddle.net/bvuWR/106/

$(function () {
var chart;
$(document).ready(function() {

    $("#updateAxis").click(function(){
        chart.xAxis[0].setCategories(['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Lemon']);
        for (var i = 0; i < chart.series.length; i++)
        {
            chart.series[i].addPoint(Math.random() * 5, true, true);
        }
    });

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        tooltip: {
            formatter: function() {
                return ''+
                    this.series.name +': '+ this.y +'';
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
            series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });        
});    

});

有什么办法可以获取作为数据系列传递的数据并添加到类别下?

此示例在配置中对数据进行了硬编码,但是,我将把这些值动态传递给数据系列,并且类别中的值也需要更改。

1 个答案:

答案 0 :(得分:1)

您可以将轴类型设置为类别,并从点名称定义类别。

  xAxis: {
    type: 'category'
  },
  series: [{
    name: 'John',
    data: [{
      y: 5,
      name: 'Apples'
    }, {
      y: 2,
      name: 'Oranges'
    }, {
      y: 3,
      name: 'Pears'
    }]
  }]

实时演示:http://jsfiddle.net/BlackLabel/d41cvheL/

API:https://api.highcharts.com/highcharts/xAxis.categories