HightCharts绑定后台传过来的json数据

181824442 2013-08-10 02:19:45
网上看到的大多是静态的数据,所以只写如何绑定后台传过来的数据。
代码如下:
$(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); //用前面定义的参数构造一个图表,会自动填充到页面容器中。
})

})
比较简单,希望能帮到有需要的人。
...全文
1354 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
a897265809 2014-09-06
  • 打赏
  • 举报
回复
请问我想在 series: [{ name: '最低气温' }, { name: '最高气温' }],中动态添加要怎么做呢?
凌风95 2014-02-12
  • 打赏
  • 举报
回复
我试了,但是图像显示不出来
181824442 2013-08-12
  • 打赏
  • 举报
回复
我给分你是从我的分里面扣吗?
Hello World, 2013-08-12
  • 打赏
  • 举报
回复
不加载exporting.js右上角的菜单就不会出来了 legend是图例

87,903

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧