当行数是动态的时候如何使用高图表

时间:2014-05-24 14:19:11

标签: jquery jquery-plugins highcharts

我需要为不同的实体显示一些数字,如人1和2以及...在多线图中:

经过大量搜索,我发现了更高的图表,我设计了类似的东西:

$('#container').highcharts({

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
    color:'red',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
    color:'blue',
    data: [19.9, 11.5, 10.4, 12.2, 14.0, 16.0, 13.6, 18.5, 16.4, 94.1, 9.6, 4.4]
}]

});

这里是小提琴链接:

fiddle link

现在问题是我不知道用户选择在图表中显示多少个实体, 它可以是2个实体(行)或3或4或其他。在我提供的代码中,它不是动态的,如果我想使它适用于3行或4行,那么我必须用不同的功能对其进行硬编码,这是没有意义的。有谁知道我怎么能这样做?

1 个答案:

答案 0 :(得分:1)

但你可以这样做

var seriesOne={color:'red',
               data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
    seriesTwo= {color:'blue',
                data: [19.9, 11.5, 10.4, 12.2, 14.0, 16.0, 13.6, 18.5, 16.4, 94.1, 9.6, 4.4]
},
   //---
seriesN= {color:'red',
          data: [ 14.0, 16.0, 13.6,94.1, 9.6, 4.4, 19.9, 11.5, 10.4, 12.2,18.5, 16.4, ]
},
   youDynamicSeries = [];

   youDynamicSeries.push(seriesOne);
   youDynamicSeries.push(seriesTwo);
   youDynamicSeries.push(seriesN);


$('#container').highcharts({

xAxis: {
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: youDynamicSeries

 });