列高圖表的系列數據

Question

我正在研究highchart柱形圖。 但是我陷入了系列添加的困境。 這是我的代碼

function renderChart(series_data){
  $("#container").height(400);
      var chart = new Highcharts.Chart({
            chart: {
            type: 'column',
            renderTo: 'container',      
            marginBottom: 105
            },
            title: {
            text: 'Issue Sales',                
            },
               xAxis: {
              type: 'datetime',
              dateTimeLabelFormats: {
                        month: '%e. %b',
                        year: '%b'
                    },
          minTickInterval: 24 * 3600 * 1000,
              labels: {
                 rotation: -45,
                 align: 'right',
                 style: {
                   fontSize: '13px',
                   fontFamily: 'Verdana, sans-serif'
                 }
               }
        },
        yAxis: {
         plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
        }],
        title: {
         text: 'Number of Units',
         margin: 80
        }
    },
        tooltip: {
         shared: true,
         valueSuffix: ''
        },
        legend: {
         floating: true,
         borderWidth: 1,
         backgroundColor: '#FFFFFF'
       },
       series: {}
    });

    $.each(series_data, function(key, val) {
       toSeries = [];
       cat_name = key;      
       date_data = [];
       xdate = '';          
       $.each(val,function(k,v){
          chartdate = v.date;
          chartcount = v.count;                     
          dateval = chartdate.split("-");                       
          x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
          toSeries.push([x,chartcount]);
       });
       chart.addSeries({
         name : cat_name,
         data : parseFloat(toSeries)    
    });
});
}

如果我要添加常量序列數據，例如

chart.addSeries({ name: 'Rainfall11', type: 'column', color: '#08F',
data:[100, 200, 300, 400, 100, 200]
});

正在顯示一些圖形。 但是，當涉及到動態數據時，它不會顯示。 我也在使用Date.UTC函數顯示

我通過變量series_data將json數據發送到函數renderChart，這是另一個ajax函數的結果。 樣本json結果是這個。

{“法拉利2013年4月”：[{“日期”：“ 2013-06-05”，“月”：“ 2013年6月”，“計數”：“ 1.00”}，{“日期”：“ 2013-06- 08" ， “月”： “六月-2013”​​， “算”： “1.00”}，{ “日期”： “2013年6月15日”， “月”： “六月-2013”​​， “數”：” 1.00“}，{” date“：” 2013-06-16“，” month“：” 2013年6月“，” count“：” 1.00“}]，” Ferrari 2013年5月“：[{” date“：” 2013年6月5" 日， “月”： “六月-2013”​​， “算”： “1.00”}，{ “日期”： “2013年6月7日”， “月”： “六月-2013”​​，”數 “：” 1.00 “}，{” 日期 “：” 2013年6月8" 日， “月”： “六月-2013”​​， “數”： “2.00”}，{ “日期”：“2013-06- 09“，” month“：” June-2013“，” count“：” 3.00“}]，” Ferrari 2013年3月“：[{” date“：” 2013-06-07“，” month“：” June- 2013“，” count“：” 1.00“}]，” Ferrari June 2013“：[{” date“：” 2013-06-10“，” month“：” June-2013“，” count“：” 1.00“ }，{ “日期”： “2013年6月11日”， “月”： “六月-2013”​​， “數”： “1.00”}，{ “日期”： “2013年6月12日”， “月” ： “六月-2013”​​， “算”： “1.00”}，{ “日期”： “2013年6月13日”， “月”： “六月-2013”​​， “數”： “3.00”}，{”日期 “：” 2013年6月14" 日， “月”： “六月-2013”​​， “算”： “2.00”}，{ “日期”： “2013年6月16日”， “月”：“6月 - 2013" ， “算”： “4.00”}，{ “日期”： “2013年6月17日”， “月”： “六月-2013”​​， “數”： “1.00”} ，{“ date”：“ 2013-06-18”，“ month”：“ 2013年6月”，“ count”：“ 2.00”}]，“ Ferrari 2013年2月”：[{“ date”：“ 2013-06 -11" ， “月”： “六月-2013”​​， “算”： “1.00”}，{ “日期”： “2013年6月18日”， “月”： “六月-2013”​​， “伯爵”： “1.00”}]}

我猜想問題出在Date.UTC部分。 因為當我執行console.log（）時，它顯示的是NaN。

請幫助解決此問題。

我除了這樣的結果。

演示Jsfiddle

Answer 1

您要先設置圖表，然后再將數據放入其中。 首先是數據系列，然后調用Highcharts.Chart。 然后，您的程序也將運行以獲取動態數據。

Answer 2

var series_data = {"Ferrari April 2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"}],"Ferrari January 2013":[{"date":"2013-06-02","month":"June-2013","count":"1.00"}],"Ferrari March 2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari May 2013":[{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-02","month":"June-2013","count":"2.00"},{"date":"2013-06-03","month":"June-2013","count":"2.00"},{"date":"2013-06-04","month":"June-2013","count":"1.00"},{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"}]};

renderChart(series_data)

function renderChart(series_data){
 var chart = new Highcharts.Chart({
  chart: {
    type: 'column',
    renderTo: 'container',      
    marginBottom: 105
},
title: {
    text: 'Issue Sales',                
},
xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
    },
    minTickInterval: 24 * 3600 * 1000,
    labels: {
        rotation: -45,
        align: 'right',
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
},
yAxis: {
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }],
    title: {
        text: 'Number of Units',
        margin: 40
    }
},
tooltip: {
    shared: true,
    valueSuffix: ''
},
legend: {
    floating: true,
    borderWidth: 1,
    backgroundColor: '#FFFFFF'
},
plotOptions: {
    column: {                       

    }
},
series: {}
});

$.each(series_data, function(key, val) {
   toSeries = [];
cat_name = key;     
date_data = [];
xdate = '';             
$.each(val,function(k,v){
    chartdate = v.date;
    chartcount = v.count;                       
    dateval = chartdate.split("-");                     
    x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
    toSeries.push([x,parseInt(chartcount)]);      // Parse your data here!  
});
chart.addSeries({
    name : cat_name,
    data : toSeries
});

});
 }

希望它能起作用！

Answer 3

chart.addSeries({
            data: [32, 43, 42],
            index: 0,
            zIndex:1
        });

現場演示