【发布时间】：2015-01-26 02:10:27
【问题描述】：
我遇到了一个奇怪的问题。我有一个web page 和 2 个 highcharts 仪表模块，我正在使用 json 从 php 脚本中检索数据。 json 看起来像 [{"PID":"1019","Date":"15-10-2014","Time":"02:52:36","Temperature":"31","Humidity":"65"}]
1) 问题是，在重试数据的第一次迭代期间，它没有反映在模块中。 [IMAGE]
2）在数据的第二次迭代期间，数据由模块显示，但没有颜色突出显示并且
3) 在第三次迭代以后，模块以颜色突出显示数据。
我认为问题在于 json 的异步行为。但我不确定，我是网络编程的新手。
我的 javascript 如下
var point, temperature, humidity, pressure, windspeed, winddirection, light, rainfall, elevation, lat, lang, bvolt, bcurrent, svolt, scurrent, temp;
$.getJSON("http://openweather.in/localpublish/livedata.php", function(data) {
console.log(data);
temperature = parseFloat(data[0].Temperature);
humidity = parseFloat(data[0].Humidity);
pressure = parseFloat(data[0].Pressure);
windspeed = parseFloat(data[0].Windspeed);
winddirection = parseFloat(data[0].Winddirection);
light = parseFloat(data[0].Light);
rainfall = parseFloat(data[0].Rainfall);
elevation = parseFloat(data[0].Elevation);
lat = parseFloat(data[0].Lat);
lang = parseFloat(data[0].Lang);
bvolt = parseFloat(data[0].Bvolt);
bcurrent = parseFloat(data[0].Bcurrent);
svolt = parseFloat(data[0].Svolt);
scurrent = parseFloat(data[0].Scurrent);
});
$(document).ready(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '75%'],
size: '120%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -30,
borderWidth: 0,
useHTML: true
}
}
}
};
// The Temperature gauge
$('#container-temperature').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
stops: [
[1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.75, '#DF5353'] // red
],
min: 0,
max: 50
},
credits: {
enabled: false
},
series: [{
name: 'Temperature',
data: [parseFloat(temperature)],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:20px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">°C</span></div>'
},
tooltip: {
valueSuffix: '°C'
}
}]
}));
// The Humidity gauge
$('#container-humidity').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
stops: [
[1, '#55BF3B'], // green
[0.55, '#DDDF0D'], // yellow
[0.8, '#DF5353'] // red
],
min: 0,
max: 100
},
credits: {
enabled: false
},
series: [{
name: 'Humidity',
data: [parseFloat(humidity)],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:20px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">%rh</span></div>'
},
tooltip: {
valueSuffix: '%rh'
}
}]
}));
// The atmospheric pressure gauge
$('#container-pressure').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
stops: [
[1, '#55BF3B'], // green
[0.55, '#DF5353'] // red
],
min: 0,
max: 20
},
credits: {
enabled: false
},
series: [{
name: 'Atmospheric Pressure',
data: [parseFloat(pressure)],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:20px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 100 hbar</span></div>'
},
tooltip: {
valueSuffix: 'hpa'
}
}]
}));
setInterval(function () {
$.getJSON("http://openweather.in/localpublish/livedata.php", function(data) {
console.log(data);
temperature = data[0].Temperature;
humidity = data[0].Humidity;
pressure = data[0].Pressure;
windspeed = data[0].Windspeed;
winddirection = data[0].Winddirection;
light = data[0].Light;
rainfall = data[0].Rainfall;
elevation = data[0].Elevation;
lat = data[0].Lat;
lang = data[0].Lang;
bvolt = data[0].Bvolt;
bcurrent = data[0].Bcurrent;
svolt = data[0].Svolt;
scurrent = data[0].Scurrent;
});
point = $('#container-temperature').highcharts().series[0].points[0];
point.update(parseFloat(temperature));
point = $('#container-humidity').highcharts().series[0].points[0];
point.update(parseFloat(humidity));
point = $('#container-pressure').highcharts().series[0].points[0];
point.update(parseFloat(pressure));
/*
point = $('#container-windspeed').highcharts().series[0].points[0];
point.update(windspeed);
point = $('#container-winddirection').highcharts().series[0].points[0];
point.update(winddirection);
point = $('#container-light').highcharts().series[0].points[0];
point.update(light);
point = $('#container-rainfall').highcharts().series[0].points[0];
point.update(rainfall);
point = $('#container-elevation').highcharts().series[0].points[0];
point.update(elevation);
point = $('#').highcharts().series[0].points[0];
point.update(humidity);
temp = bvolt + ' V';
$('#disp-batteryV').val(temp);
temp = bcurrent + ' mA';
$('#disp-batteryC').val(temp);
temp = svolt + ' V';
$('#disp-solarV').val(temp);
temp = scurrent + ' mA';
$('#disp-solarC').val(temp);
*/
}, 1*60*1000);
});
【问题讨论】：
-
你的图表应该在 $.getJSON() 回调中初始化，因为图表之前已经初始化，获取整个数据。
-
有两个 $.getJSON() 函数，一个在开头，第二个在 setInterval 函数中。如果您查看图像，很明显 json 在图表呈现之前响应，并且这种情况仅在某些时候发生。
-
你可以看看link。我已将 json 响应记录到控制台。
-
使用 getjson 然后在回调中加载新的，最后运行图表。 ajax 调用的 Setinerval 不正确。
标签： javascript jquery json highcharts getjson