HightCharts绑定后台传过来的json数据
网上看到的大多是静态的数据,所以只写如何绑定后台传过来的数据。
代码如下:
$(document).ready(function () {
//先把图表的参数定义好。
var options = {
chart: {
renderTo: 'containArea', //图表放入的容器ID
type: 'line' //图表类型 此处是拆线图
},
xAxis: {
categories: ['周一','周二','周三','周四'] //横坐标数据点文字 也可动态赋值,变量格式为['',''...]
},
yAxis: {
title: {
text: '.c'//Y坐标说明
},
labels: {
formatter: function () {
return this.value + '.C' //纵坐标数据格式。
}
}
},
series: [{ name: '最低气温' }, { name: '最高气温' }], //此处定义两个series,即两条线,最高气温和最低气温,如果更多则在里面添加大括号。
legend: {
enabled:'false' //此处具体不清楚是干嘛的。
},
credits: {
enable: 'false', //版权信息 右下角的链接。右上角的chart context menu还没找到如何去掉。
text:' ',
href:' '
}
};
//下面是获取数据及绑定的方法
$.getJSON("Handler1.ashx", function (data) { //请求的地址和回掉函数。
//注意:后台的json或json数组格式一定要正确,否则进不了回调函数。
//我后台传回的数据格式为:[[1,2,3,4],[5,6,7,8]] 是我自己拼成的json字符串,并不是把数据序列成json。
options.series[0].data = data[0]; //最低气温的图表线 绑定
options.series[1].data = data[1]; //最高气温的图表线 绑定
var chart = new Highcharts.Chart(options); //用前面定义的参数构造一个图表,会自动填充到页面容器中。
})
})
比较简单,希望能帮到有需要的人。