1

我正在研究 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 月":[{"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 2013 年 3 月":[{" date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari June 2013":[{"date":"2013-06-10" ,"月":"2013 年 6 月","计数":"1.00"},{"日期":"2013-06-11","月":"2013 年 6 月","计数":"1.00" },{"date":"2013-06-12","month":"June-2013","count":"1.00"},{"date":"2013-06-13","month" :"2013 年 6 月","计数":"3.00"},{"日期":"2013-06-14","月":"2013 年 6 月","计数":"2.00"},{"日期":"2013-06-16","月":"2013 年 6 月","计数":"4.00"}, {"date":"2013-06-17","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":" 2013 年 6 月","count":"2.00"}],"法拉利 2013 年 2 月":[{"date":"2013-06-11","month":"June-2013","count":" 1.00"},{"date":"2013-06-18","month":"June-2013","count":"1.00"}]}"4.00"},{"date":"2013-06-17","month":"June-2013","count":"1.00"},{"date":"2013-06-18", "月":"2013 年 6 月","计数":"2.00"}],"法拉利 2013 年 2 月":[{"日期":"2013-06-11","月":"2013 年 6 月", "count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"1.00"}]}"4.00"},{"date":"2013-06-17","month":"June-2013","count":"1.00"},{"date":"2013-06-18", "月":"2013 年 6 月","计数":"2.00"}],"法拉利 2013 年 2 月":[{"日期":"2013-06-11","月":"2013 年 6 月", "count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"1.00"}]}"月":"2013 年 6 月","计数":"1.00"},{"日期":"2013-06-18","月":"2013 年 6 月","计数":"1.00"} ]}"月":"2013 年 6 月","计数":"1.00"},{"日期":"2013-06-18","月":"2013 年 6 月","计数":"1.00"} ]}

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

请帮助解决此问题。

我排除了这样的结果。

在此处输入图像描述

演示 Jsfiddle

4

3 回答 3

1

您在将数据放入其中之前设置图表。第一个数据系列，然后调用 Highcharts.Chart。然后你的程序也将运行动态数据。

于 2013-08-09T19:51:57.250 回答
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
});

});
 }

希望它有效！

于 2013-08-10T16:24:00.627 回答
0 
chart.addSeries({
            data: [32, 43, 42],
            index: 0,
            zIndex:1
        });

现场演示

于 2013-08-09T19:04:35.677 回答