javascript - 列 Highcharts 的系列数据

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 结果是这样的。

{"Ferrari April 2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"1.00"},{"date":"2013-06-15","month":"June-2013","count":"1.00"},{"date":"2013-06-16","month":"June-2013","count":"1.00"}],"Ferrari May 2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"2.00"},{"date":"2013-06-09","month":"June-2013","count":"3.00"}],"Ferrari March 2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari June 2013":[{"date":"2013-06-10","month":"June-2013","count":"1.00"},{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-12","month":"June-2013","count":"1.00"},{"date":"2013-06-13","month":"June-2013","count":"3.00"},{"date":"2013-06-14","month":"June-2013","count":"2.00"},{"date":"2013-06-16","month":"June-2013","count":"4.00"},{"date":"2013-06-17","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"2.00"}],"Ferrari February 2013":[{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"1.00"}]}

我猜问题出在 Date.UTC 部分。因为当我执行 console.log() 时它显示 NaN 。

请帮助解决这个问题。

我排除了这样的结果。

Demo Jsfiddle

Answer 1

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

});
 }

希望它有用!