Highcharts 动态加载 Json数据


1.引入 Highcharts 6.0 css 和 js 

2. 创建一个div容器 

<div id="container" style="width: 1640px; height: 460px; margin: 0 auto"></div>

3. 配置 Highcharts 容器的相关属性  

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> 数据 

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(); //刷新
}})}




猜你喜欢

转载自blog.csdn.net/qq_26289533/article/details/78548072