如何将json数据传入到Highcharts中的data中

思路：1、获取后台传过来的json数据(使用ajax等),此处我用的是前一个页面中传过来的json数据

            2、解析我们想要json数据(这是将要传入到highcharts中series下的data)

    3、将数据绑定到显示图表的方法中[如何绑定是此问题的难点]

下面的例子：具体解释

首先加载bind()，bind()中   getTemperature(td,tm,ty);getHumidity(hd,hm,hy);,它们是对应的图表中数据的绑定（由于bind()方法中解析的json数据,外面不易访问，故在bind中直接传值绑定即可）

<script type="text/javascript">

// JSONData = {
// "id": "-1",
// "site_name": "网络中心一楼",
// "address": "大学城图书馆网络中心一楼",
// "t": "36.0",
// "h": "0.600",
// "l": "正常",
// "s": "异常",
// "td": "17.5,18.3,20.2,21.9,24.3,26.0,28.5,29.2,30.2,31.5,32.8,33.6,35.2,36.9,38.8,36.8,35.3,33.1,30.6,28.8,26.9,24.6,22.7,19.8",
// "tm": "15.3,16.4,17.9,20.0,22.2,24.1,25.7,27.3,29.4,30.7,31.9,32.8,34.0,36.8,37.9,36.3,35.2,32.6,30.2,27.7,25.8,23.8,22.4,19.4",
// "ty": "14.8,15.8,17.3,19.7,21.8,23.8,25.5,27.1,29.4,30.6,31.8,32.7,33.8,36.6,37.9,36.3,35.2,32.5,30.1,27.6,25.7,23.6,22.3,19.2",
// "hd": "0.530,0.532,0.549,0.569,0.572,0.609,0.622,0.633,0.642,0.643,0.651,0.652,0.660,0.651,0.645,0.642,0.640,0.629,0.602,0.580,0.565,0.543,0.530,0.525",
// "hm": "0.523,0.530,0.546,0.568,0.579,0.607,0.622,0.631,0.632,0.633,0.638,0.639,0.652,0.646,0.643,0.638,0.634,0.625,0.614,0.583,0.570,0.551,0.532,0.524",
// "hy": "0.522,0.529,0.548,0.568,0.578,0.616,0.622,0.632,0.632,0.632,0.636,0.638,0.652,0.646,0.642,0.637,0.633,0.626,0.615,0.584,0.571,0.554,0.534,0.524"
// };
//存储从服务器接收的JSON数据
var DataJSON;
//温度日均线
var td;
//温度月均线
var tm;
//温度年均线
var ty;
//湿度日均线
var hd;
//湿度月均线
var hm;
//湿度年均线
var hy;
$(function() {
bind(); //获取数据源信息
});
//获取上个页面中传来的Json数据并绑定到highcharts上
function bind() {
document.addEventListener("plusready", function() {
//获取从newPicker html传过来的数据
var param = plus.webview.currentWebview();
mui.toast(param.state);
DataJSON = param.DataJSON;
//console.log('tem + DataJSON： ' + DataJSON);
//console.log('tem + JSON.parse(DataJSON).tm: ' + JSON.parse(DataJSON).tm);
td = JSON.parse(DataJSON).td;
tm = JSON.parse(DataJSON).tm;
ty = JSON.parse(DataJSON).ty;
hd = JSON.parse(DataJSON).hd;
hm = JSON.parse(DataJSON).hm;
hy = JSON.parse(DataJSON).hy;
getTemperature(td,tm,ty);
getHumidity(hd,hm,hy);
});

};


var chart1;
function getTemperature(tdData,tmData,tyData) {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'temperature',
defaultSeriesType: 'spline',
ignoreHiddenSeries: false
},
title: {
text: '温度信息'
},
subtitle: {
text: '网络中心一楼'
},
xAxis: {
categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
},
yAxis: {
title: {
text: '温度'
},
labels: {
formatter: function() {
return this.value + '°'
}
}
},
tooltip: {
formatter: function() {
if (this.x <= 5) {
return '凌晨' + this.x + '点: ' + this.y + '°C';
} else if (this.x <= 8) {
return '早上' + this.x + '点: ' + this.y + '°C';
} else if (this.x <= 11) {
return '上午' + this.x + '点: ' + this.y + '°C';
} else if (this.x <= 14) {
return '中午' + this.x + '点: ' + this.y + '°C';
} else if (this.x <= 18) {
return '下午' + this.x + '点: ' + this.y + '°C';
} else if (this.x <= 23) {
return '晚上' + this.x + '点: ' + this.y + '°C';
} else {
return '' + this.x + '点: ' + this.y + '°C';
}
}
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: '日均线',
marker: {
symbol: 'square'
},
data:eval("[" + tdData + "]")
}, {
name: '月均线',
marker: {
symbol: 'circle'
},
data:eval("[" + tmData + "]")
}, {
name: '年均线',
marker: {
symbol: 'diamond'
},
data:eval("[" + tyData + "]")
}]
});
}

var chart2;
function getHumidity(hdData,hmData,hyData) {
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'humidity',
defaultSeriesType: 'spline',
ignoreHiddenSeries: false
},
title: {
text: '实时平均湿度'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
},
yAxis: {
title: {
text: '湿度'
},
labels: {
formatter: function() {
return this.value
}
}
},
tooltip: {
formatter: function() {
if (this.x <= 5) {
return '凌晨' + this.x + '点: ' + this.y;
} else if (this.x <= 8) {
return '早上' + this.x + '点: ' + this.y;
} else if (this.x <= 11) {
return '上午' + this.x + '点: ' + this.y;
} else if (this.x <= 14) {
return '中午' + this.x + '点: ' + this.y;
} else if (this.x <= 18) {
return '下午' + this.x + '点: ' + this.y;
} else if (this.x <= 23) {
return '晚上' + this.x + '点: ' + this.y;
} else {
return '' + this.x + '点: ' + this.y;
}
}
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: '日均线',
marker: {
symbol: 'square'
},
data:eval("[" + hdData + "]")
}, {
name: '月均线',
marker: {
symbol: 'circle'
},
data:eval("[" + hmData + "]")
}, {
name: '年均线',
marker: {
symbol: 'diamond'
},
data:eval("[" + hyData + "]")
}]
});
}

</script>

在body中添加

<div id="temperature" style="width: 600px; height: 300px; margin: 0 auto;margin-top: 50px ;"></div>
<div id="humidity" style="width: 600px; height: 300px; margin: 0 auto;margin-top: 50px ;"></div>