用eval("("+data+")")解析json的方式加载数据:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>hcharts</title>
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
$(function () {
var x = [];//X轴
var y = [];//Y轴
var xtext = [];//X轴TEXT
var color = ["red", "blue", "yellow", "green", "black"];
$.ajax({
type: 'get',
url: "../AjaxTools/test1.ashx?method=GetPa",//请求数据的地址
success: function (data) {
var t1 = eval("(" + data + ")");
for (var key in t1.list) {
t1.list[key].y = parseInt(t1.list[key].htz);
xtext[key] = t1.list[key].hname;
t1.list[key].color = color[key];
}
var t2 = eval("(" + data + ")");
for (var key in t2.list) {
t2.list[key].y = parseInt(t2.list[key].hpg);
xtext = t2.list[key].hname;
t2.list[key].color = color[key];
}
var t3 = eval("(" + data + ")");
for (var key in t3.list) {
t3.list[key].y = parseInt(t3.list[key].hl);
xtext = t3.list[key].hname;
t3.list[key].color = color[key];
}
chart.series[0].setData(t1.list);//数据填充到highcharts上面
chart.series[1].setData(t2.list);//数据填充到highcharts上面
chart.series[2].setData(t3.list);//数据填充到highcharts上面
},
error: function (e) {
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column' //显示类型 柱形
},
title: {
text: '分布图' //图表的标题
},
xAxis: {
categories:xtext.valueOf()
},
yAxis: {
title: {
text: '数量' //Y轴的名称
},
},
series: [{ name: "htz"}, { name: "hpg" }, { name: "h1" }
]
});
});
</script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<div class="message"></div>
</body>
</html>
数据:
转成json数据格式:
data = "{"list":[{"hname":"114","htz":"1","hpg":"2","hl":"3"},{"hname":"154","htz":"4","hpg":"6","hl":"3"},{"hname":"34","htz":"4","hpg":"2","hl":"1"},{"hname":"3","htz":"1","hpg":"2","hl":"4"},{"hname":"67","htz":"2","hpg":"3","hl":"5"}]}"
结果:
from:Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图