javascript - 如何在 x 轴上绘制时间图 Highcharts.js

Question

这是我的 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 调用发送到传感器数据并且会发生变化)？

Answer 1

通过设置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秒前添加的功能)