嗨我正在使用高图表并且数据正常通过但是日期没有在x轴上传出,我在数据中有一个参数,格式正确的日期我想在上面使用它x轴和弹出窗口,但我知道我需要使用UTC日期时间来正确订购
function buildAndUpdateTempChart() {
$.getJSON('server/getReadings.php', function (data) {
$('#chartContainer').highcharts('StockChart', {
chart:{
events: {
load: function(){
// set up the updating of the chart each second
//debugger;
// var series = this.series[0];
// //console.log('data is: ' + data);
// for(var i = 0; i < data.length - 1; i++){
// this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
// this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
// }
// setInterval(function () {
// //get tick
// var x = (new Date()).getTime(), // current time
// y = Math.round(Math.random() * 100);
// series.addPoint([x, y], true, true);
// }, 1000);
}
}
},
title: {
text: 'Temperature Sensor Readings'
},
yAxis: {
title: {
text: 'Degrees Celcius'
},
plotLines: [{
value: -10,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Minimum tolerated.'
}
}, {
value: 20,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Maximum tolerated.'
}
}]},
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name: 'Temp',
data: (function () {
var temp = [];
for (var i = 0; i < data.length; i++) {
temp.push([
data[i].timestamp,
parseFloat(data[i].temp)
]);
}
return temp;
}()),
tooltip: {
valueDecimals: 2
}},
{
name: 'Ambient Temp',
data: (function () {
var aTemp = [];
for (var i = 0; i < data.length; i++) {
aTemp.push([
data[i].timestamp,
parseFloat(data[i].aTemp)
]);
}
return aTemp;
}()),
tooltip: {
valueDecimals: 2
},
}]
});
})
}
$(document).ready(function(){
buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
});
答案 0 :(得分:2)
我的猜测是你需要
{{1}}你的代码中的
。希望这会有所帮助。
答案 1 :(得分:0)
这可以帮助您,您必须指定xAxis datetime
function buildAndUpdateTempChart() {
$.getJSON('server/getReadings.php', function (data) {
$('#chartContainer').highcharts('StockChart', {
chart:{
events: {
load: function(){
// set up the updating of the chart each second
//debugger;
// var series = this.series[0];
// //console.log('data is: ' + data);
// for(var i = 0; i < data.length - 1; i++){
// this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
// this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
// }
// setInterval(function () {
// //get tick
// var x = (new Date()).getTime(), // current time
// y = Math.round(Math.random() * 100);
// series.addPoint([x, y], true, true);
// }, 1000);
}
}
},
title: {
text: 'Temperature Sensor Readings'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Degrees Celcius'
},
plotLines: [{
value: -10,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Minimum tolerated.'
}
}, {
value: 20,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Maximum tolerated.'
}
}]},
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name: 'Temp',
data: (function () {
var temp = [];
for (var i = 0; i < data.length; i++) {
temp.push([
data[i].timestamp,
parseFloat(data[i].temp)
]);
}
return temp;
}()),
tooltip: {
valueDecimals: 2
}},
{
name: 'Ambient Temp',
data: (function () {
var aTemp = [];
for (var i = 0; i < data.length; i++) {
aTemp.push([
data[i].timestamp,
parseFloat(data[i].aTemp)
]);
}
return aTemp;
}()),
tooltip: {
valueDecimals: 2
},
}]
});
})
}
$(document).ready(function(){
buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
});