如何使用 StockCharts 动态更新 HighCharts？

Question

我想做这个例子：https://jsfiddle.net/t0n38px4/

我有心电图数据。如果我不使用 stockChart，心电图会显示得很好，但如果我使用，我会遇到问题，因为 stockhcart 缩放得太远了。我的图表选项在这里等于 jsfiddle 示例，只是我更改了系列数据和加载事件。

 this.chartOptions = {
          series: [
            {
              type: "line",
              data: (function(component) {
                var data = [],
                  i;
                for (i = 0; i < component.length; i += 1) {
                  const newData = component.addMoreData(); //push new [time, value]
                  const time = newData[0]; // get new time
                  const value = newData[1]; // get new value
                  data.push({
                    x: time,
                    y: value
                  });
                }
                return data;
              })(this)
            }
          ],
          chart: {
            events: {
              load: (function(component) {
                return function() {
                  var series = this.series[0];
                  setInterval(() => {
                    const newData = component.addMoreData(); //push new [time, value]
                    const time = newData[0]; // get new time
                    const value = newData[1]; // get new value
                    var x = time,
                      y = value;
                    series.addPoint([x, y], true, true, false); //false
                  }, 500);
                };
              })(this)
            }
          },
          rangeSelector: {
            buttons: [
              {
                count: 1,
                type: "minute",
                text: "1M"
              },
              {
                count: 5,
                type: "minute",
                text: "5M"
              },
              {
                type: "all",
                text: "All"
              }
            ],
            inputEnabled: false,
            selected: 0
          },
          exporting: {
            enabled: false
          }
        };

完整代码： https://stackblitz.com/edit/angular-ivy-t2evda

Answer 1

为此，我将使用图表回调函数而不是load。事件。
另外，您可以参考图表并使用addPoint 方法向系列添加点。

演示：https://stackblitz.com/edit/highcharts-angular-basic-line-jtnr6g
API：https://api.highcharts.com/class-reference/Highcharts.Series#addPoint