HighChart 未正确绘制数据
HighChart isn't plotting data correctly
嗨,我正在使用高图表,数据正常,但是日期没有在 x 轴上通过,我在 Data 中有一个格式正确的日期参数,我想在 x 轴和弹出窗口上使用它,但是我知道我需要使用 UTC 日期时间才能正确排序
https://i.stack.imgur.com/kU4M6.jpg
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
});
我猜你需要
xAxis: {
type: 'datetime'
},
在您的代码中。 希望这有帮助。
这
可以帮助您,您必须指定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
});
相关文章:
- 使用相同的数据集绘制各种符号
- 多维数据集网格未在指定的分区中绘制
- 使用外部ajax数据PHP绘制图表
- 如何在D3.js中绘制地图投影上的点,并使用范围滑块过滤数据
- 使用新参数通过服务器端处理重新绘制引导数据表
- 将数据绘制到C3的最佳实践
- 在 Chartjs v2 极坐标图中重现错误,未绘制所有提供的数据
- 我需要最快、最简单的方法来在 Javascript 中绘制数据
- HighChart 未正确绘制数据
- 尝试将无符号长整型的 ARGB 数据绘制到 HTML 画布
- AngularJS nvd3折线图指令未在数据更改时重新绘制(非实时)
- 将 json 字符串转换为数组格式,可用于绘制数据图表
- 绘制数据 1 x 1 D3 js
- 使用 d3.js 中的 scale() 值未正确绘制数据
- Highcharts - 使用 MySQLi + JSON 获取和绘制数据(逐步)
- 画布图绘制数据不正确
- 通过函数刷新/重新绘制数据表
- D3绘制数据集的选择部分
- 为什么手动搜索后不重新绘制数据表?
- 如何使用外部topoJSON文件绘制数据地图