Question

我正在制作高图柱形图。但是我在系列中加入了一部分。这是我的代码

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函数来显示

我通过变量seri_data将json数据发送到另一个ajax函数的结果renderChart函数。样本json的结果就是这个。

{“法拉利四月 2013 “：[{” 日期 “：” 2013年6月5" 日， “月”： “六月-2013”， “数”： “1.00”}，{ “日期”： “2013年6月8日”，”月 “：” 六月-2013" ， “算”： “1.00”}，{ “日期”： “2013年6月15日”， “月”： “六月-2013”， “数”： “1.00”}， { “日期”： “2013年6月16日”， “月”： “六月-2013”， “算”： “1.00”}]，“法拉利可以 2013 “：[{” 日期 “：” 2013年6月5" 日， “月”： “六月-2013”， “数”： “1.00”}，{ “日期”： “2013年6月7日”，”月 “：” 六月-2013" ， “算”： “1.00”}，{ “日期”： “2013年6月8日”， “月”： “六月-2013”， “数”： “2.00”}， { “日期”： “2013年6月9日”， “月”： “六月-2013”， “算”： “3.00”}]，“法拉利游行 2013 “：[{” 日期 “：” 2013年6月7" 日， “月”： “六月-2013”， “数”： “1.00”}]，“法拉利六月 2013 “：[{” 日期 “：” 2013年6月10" 日， “月”： “六月-2013”， “数”： “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日”， “月”： “六月-2013”， “数”： “4.00”}，{ “日期” ： “2013年6月17日”， “月”： “六月-2013”， “算”： “1.00”}，{ “日期”： “2013年6月18日”， “月”： “六月2013” ， “算”： “2.00”}]，“法拉利二月 2013 “：[{” 日期 “：” 2013年6月11" 日， “月”： “六月-2013”， “数”： “1.00”}，{ “日期”： “2013年6月18日”，”月 “：” 六月-2013" ， “计数”： “1.00”}]}

我猜这个问题出现在Date.UTC部分。因为当我执行console.log（）时，它显示NaN。

请帮助解决此问题。

我除了这样的结果。

enter image description here

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

Live Demo

列高图表的系列数据

3 个答案: