网上找了很多示例,一直没有成功,最主要是卡在json数据转换成highcharts数据列格式,最开始是不知道如何把json数据转换为相应的X、Y数据,好不容易找到答案后,发现转换出来的数据highcharts显示不了,发现是转换后的highcharts数据包括双引号(["20","30","40"]),后来利用js中的parseInt转换数据格式([20,30,40])才正常显示。
总的来说还是基础不扎实,一对json数据格式不了解,二是第一次使用highcharts,第三是对js数据格式不了解,走了很多弯路,希望大家别走这样的弯路了。
$("#floor").change(function(){
var lastdata = [];
var a=$(this).val();
var b=$("#building").val();
var c=$("#city").val();
var xset =new Array();//X轴数据集
var yset =new Array();//Y轴数据集
$.ajax({
data:{floor:a,building:b,city:c},
datatype:"POST",
url:"__APP__/index/index/floorselect",
success:function(data){
var i,len=data.length;
for( i=0;i
yset[i] = parseInt(data[i].num);
xset[i] = data[i].time.substr(5,8);
}
console.log(xset);
console.log(yset);
showChart(xset,yset);
function showChart(xset,yset){
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 85
},
xAxis: {
categories: xset
},
yAxis: {
title: {
text: '人数'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return ''+ this.series.name +'
'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: '时间',
data: yset
}]
});
}
}
});
})
代码的大意是通过下拉列表向后台选中相应的值,后台ajax返回json数据,将返回的json分别转换为highcharts的X,Y数据列,
这里不知道json返回的数值是带双引号的,所以要用parseInt改变数据格式,去掉双引号才行,至于为什么会有双引号,就需要大神来解答了,也许是ajaxreturn返回的字符串格式把