Question

这是我的小提琴：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设置为datetime，将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秒前添加的功能）

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

1 个答案: