Highcharts动态加载json数据

来源:互联网 发布:curl post json 编辑:程序博客网 时间:2024/05/16 06:00


1.引入Highcharts 6.0 的样式和js 

2. 写一个div容器 <div id="container" style="width: 1640px; height: 460px; margin: 0 auto"></div>

3. 下面配置容器的相关属性  ,最后ajax跟java后台返回的json数组做交互 ,得到的值遍历给数组,数组再分别给这个new 的 chart (容器对象) 选择的 x y 轴

var chart = new Highcharts.Chart('container', {
title : {
text : ' ',
x : -20
},
subtitle : {
text : ' ',
x : -20
},
xAxis : {
categories : []
},
yAxis : {
title : {
text : ' '
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
tooltip : {
valueSuffix : '条'
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'middle',
borderWidth : 0
},
credits : {
enabled : false
}
});



得到list <model>接收的数据转jsonArray数组,response 读给ajax  


function Load_SeriesData() {
$.ajax({
type : "POST",
url : "today.action",
dataType : 'json',
async : false,
success : function(json) {
debugger;
var data = [];
var time = [];
for (var i = 0; i < json.length; i++) {
time[i] = json[i].clicktime;
data[i] = json[i].clickcount;
}
chart.xAxis[0].categories = time;
var series = chart.addSeries({
name : '今天',
data : data
}, true);
chart.redraw(); //刷新
}
})
}




原创粉丝点击