Highcharts 动态加载 Json数据

最新推荐文章于 2021-03-06 02:55:36 发布

云流花行

最新推荐文章于 2021-03-06 02:55:36 发布

阅读量1k

点赞数 1

分类专栏： JSP、CSS、JS 文章标签： Highcharts json javascript

本文链接：https://blog.csdn.net/qq_26289533/article/details/78548072

版权

JSP、CSS、JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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