这是我的 fiddle :DEMO
单击“添加到数组”按钮将对象添加到数据数组。 有效负载对象有时间、温度和湿度。
$("#addToArray").click(function() {
if(myChartTemperature) {
myChartTemperature.series[0].addPoint(payload.temperature);
}
if(myChartHumidity){
myChartHumidity.series[0].addPoint(payload.humidity);
}
dataArray.push((payload));
console.log(dataArray);
})
如何在 x 轴上绘制温度/湿度与时间的关系(假设时间数据将通过 API 调用发送到传感器数据并且会发生变化)?
最佳答案
通过设置xAxis.type
到日期时间
,以及 series.line.data.x
以毫秒为单位的事件时间戳,您可以实现您所要求的。
即:
xAxis: {
type: 'datetime',
...
}
还有
$("#addToArray").click(function() {
if(myChartTemperature) {
myChartTemperature.series[0].addPoint({
x: new Date().getTime(),
y: payload.temperature
});
}
if(myChartHumidity){
myChartHumidity.series[0].addPoint({
x: new Date().getTime(),
y: payload.humidity
});
}
dataArray.push((payload));
console.log(dataArray);
})
工作示例: https://jsfiddle.net/ewolden/ms91r4pr/6/
(注意,我只对5秒后添加的点执行此操作,因此您还需要调整5秒前添加的功能)
关于javascript - 如何在 x 轴上绘制时间图 Highcharts.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48625538/