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(); //刷新
}
})
}
- highcharts动态加载json数据
- Highcharts动态加载json数据
- highcharts+json+ashx 图表动态数据绑定
- highcharts click事件获取数据传给datagrid ,动态加载数据
- easyui和highcharts 动态加载数据和X轴数据
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表
- HighCharts(3)动态加载数据的方式
- highcharts ajax加载数据
- JSTree--JSON--AJAX动态加载JSON数据
- HighCharts动态数据刷新
- 动态更新highcharts数据
- highcharts动态报表+Json用法
- highcharts 实现动态加载多个饼图
- Echarts ajax动态加载json数据
- ajax动态加载json数据并解析
- EasyUI datagrid动态加载json数据
- Highcharts ajax加载数据实例
- HighCharts动态显示数据实例
- MongDB笔记:win10下安装及java API调用
- python group()
- Android脱壳圣战之---脱掉360加固壳(破解约友神器的钻石充值功能)
- 解决eclipse+MAVEN提示One or more constraints have not been satisfied.的问题
- Android Kotlin 基本数据类型
- Highcharts动态加载json数据
- MUI/APP获取外部URL参数
- 第十一周项目2—操作用邻接表存储的图
- Webpack-dev-server的配置详解
- 饮料新品难存活,实现成功的因素有哪些
- 基于代理模式sharding-jdbc的mysql一主多从读写分离配置文件备份
- 第十周项目一
- [CQOI2012]交换棋子
- centos虚拟机配置静态ip