如何动态设置Highcharts类别?

时间:2016-01-28 14:01:00

标签: javascript highcharts

我一直在阅读文档和谷歌搜索几个小时,并没有在找到这些类别方面取得任何进展。我正在构建grapg。

var udsChart; //global UDS chart variable
function requestData() {
    $.ajax({
        url: 'getJsonData.aspx?ID=udsLevel1',
        success: function (point) {
            udsChart.series[0].setData(point, true);
            setTimeout(requestData, 1000);                
        },
        cache: false
    });
}

udsChart = new Highcharts.Chart({
    chart: {
        renderTo: 'udsGraphDiv',
        defaultSeriesType: 'column',
        events: {
            load: requestData
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        text: 'xAxis'
    },
    yAxis: {
        text: 'yAxis'
    },
    series: [{
        name: 'Random data',
        data: []
    }]
});

enter image description here

3 个答案:

答案 0 :(得分:3)

您的类别应该是固定的,您可以通过setData函数使用值数组setData。但如果类别也在变化,请尝试这个

 success: function (data) {
 var categories= [];
 var seriesData = [];
 $.each(data,function(item){
      categories.push(item[0]);
      seriesData.push(item[1]);
 });
 udsChart.xAxis[0].setCategories(categories); //setting category
 udsChart.series[0].setData(seriesData , true); //setting data
setTimeout(requestData, 1000);
}

答案 1 :(得分:2)

您只需设置xAxis类别属性即可。 这是一个example

var data = [["01/22/2016",108],["01/24/2016",45],["01/25/2016",261],
["01/26/2016",224],["01/27/2016",307],["01/28/2016",64]];

var cat = [];

data.forEach(function(item) {

  cat.push(item[0]);

});

udsChart = new Highcharts.Chart({


chart: {
    renderTo: 'udsGraphDiv',
    defaultSeriesType: 'column',
    events: {
        //load: requestData
    }
},
title: {
    text: 'Live random data'
},
xAxis: {
    text: 'xAxis',
    categories: cat
},
yAxis: {
    text: 'yAxis'
},
series: [{
    name: 'Random data',
    data: data 
}]

});

答案 2 :(得分:0)

您缺少简单属性:xAxis.type。将其设置为category并将起作用,如下所示:

xAxis: {
    text: 'xAxis',
    type: 'category'
},