Question

这是我的小提琴：DEMO

小提琴模仿真实案例场景，其中我从传感器获取数据（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

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

1 个答案: