javascript - 使用 Highcharts.js 绘制动态添加的数组元素

Question

这是我的 fiddle :DEMO

fiddle 是对真实案例场景的模仿，其中我从传感器(MQTT)获取数据

dataArray[] 每 1 秒填充一次。为了显示相同的内容，我有一个按钮，单击该按钮即可将数组元素添加到 dataArray。

5 秒超时后开始绘制图表。如果在 DOM 准备好后 5 秒内单击按钮“x”次，将绘制“x”个点。

$("#addToArray").click(function() {
  dataArray.push((payload));
  console.log(dataArray);
})

var payload = {
  "temperature": 2,
  "humidity": 80
};

function startGraph() {
   //Graph code
}

如果 5 秒后按下按钮，数组元素仍将被添加但不会绘制(即，5 秒后传入的任何传感器数据都不会绘制)

有没有办法读取新添加的数组元素并继续绘制图形？

Answer 1

您可以使用该系列的addPoint方法动态添加点。

$("#addToArray").click(function() {
  //myChartTemperature and myChartHumidity are created  globally in your code
  //so I check if they exist here
  if(myChartTemperature) {
    myChartTemperature.series[0].addPoint(payload.temperature);
  }
  if(myChartHumidity){
    myChartHumidity.series[0].addPoint(payload.humidity);
  }
})

JSFiddle