在没有默认系列的情况下在 Highcharts 上显示实时数据答案

【问题标题】：Show live data on Highcharts without default series在没有默认系列的情况下在 Highcharts 上显示实时数据
【发布时间】：2018-07-21 18:26:00
【问题描述】：

我从 Highchart 网站上找到了这段代码：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/

我想在默认系列为空的图表上显示数据并将dateTime 设置为xAxis。我不想使用 jQuery，也不想在图表中添加加载事件点。我只想在页面完全加载时添加点。我用过这个

const chart = new Highcharts.chart('container', {
  ...
  ...
  ...
}

document.addEventListener('DOMContentLoaded', function() {
  var i = 0;
  console.log(chart)
  setInterval(function() {
    console.log(values[i])
    chart.series[0].addPoint(values[i], true, true);
    i++;
  }, 1000);
})

我使用了类似上面链接的图表结构。 values[i] 是 [dateTime, Number] 的一点，我从我的 API 中得到它。我找到了一些使用xAxis 类别的解决方案，但我需要使用dateTime 并显示dateTime 没有类别。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您不能将带移位的点添加到没有数据的系列中。添加第一个点而不使用移位或不使用移位：http://jsfiddle.net/BlackLabel/0h9jz3t1/

const chart = new Highcharts.chart('container', {
  series: [{}]
});
const values = [[100, 20], [200, 20], [300, 20], [400, 20], [500, 20]];

document.addEventListener('DOMContentLoaded', function() {
  var i = 0;

  chart.series[0].addPoint(values[i], true, false);
  i++;

  setInterval(function() {
    chart.series[0].addPoint(values[i], true, true);
    i++;
  }, 1000);
});

现场演示：http://jsfiddle.net/BlackLabel/oqp30tna/

API：https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

【讨论】：