您的位置:首页 > 其它

动态生成highcharts seriess数据

2014-07-16 09:52 288 查看
将highcharts中series数据从后台中查询出来,动态生成数据。

原series数据格式:

series:

[

{name: 'Tokyo',

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

},

{ name: 'New York',

data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

},

{ name: 'Berlin',

data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

},

{ name: 'London',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}

]

动态生成数据:

//定义highcharts的属性数组

var options = {

chart: {

renderTo: 'chartContainerId',

type: 'bar'

},

title: {

text: ''

},

xAxis: {

categories: ['07.13']

},

yAxis: {

min: 0

},

legend: {

backgroundColor: '#FFFFFF',

reversed: true

},

plotOptions: {

series: {

stacking: 'normal'

}

},

tooltip: {

headerFormat: '<b>{point.x}</b><br />',

pointFormat: '{series.name} {point.y}'

},

series:[]

};

//动态生成series数据

var series = []; //声明一个数组

$.each(highChartsData2,function(idx,item){ //highChartsData2是从后台得到的json数据,返回的data;

series[idx] = {

name:'',data:[]

};

series[idx].name = item.name.toString(); // item.name是得到item中的name属性

series[idx].data.push(eval(item.personNum)); //item.personNum数组类型

if(series[idx].name!=""){

options.series.push(series[idx]);

}

});

//生成图表

chart2 = new Highcharts.Chart(options);

这是本人花费一天得出的经验,如果有幸被您看到了,或者您有更好的方法请分享一下。如若阁下有所指教,欢迎加qq,2496928991,请说明因果,谢谢!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: