Highcharts addPoint() 在快速间隔中调用导致图形形状崩溃

Question

// To load chart
loadChart(): void {
    let initialCardiacSamples = this.cardiacSamples;
    this.ecgChart = Highcharts.chart(this.el.nativeElement, {
      chart: {
        type: 'line',
        backgroundColor: '#4d2700',
      },
      title: {
        text: 'ECG graph using Highcharts JS',
        style: {
          color: '#ffffff'
        }
      },
      xAxis: {
        type: 'number',
        tickPixelInterval: 150
      },
      yAxis: {
        title: {
          text: 'Amplitude',
          style: {
            color: '#ffffff'
          }
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        max: 600
      },
      series: [{
        name: 'ECG data',
        data: initialCardiacSamples,
        color: '#ffffff'
      }]
    });
  }
  
  // To update chart/ Calling update for every 300mili seconds here to take next data point
  updateChart(): void {
    let xAxisPoint = this.ecgChunkSize;
    this.interval = setInterval(() => {
    // Call addData() function to add next trace point to the graph
    this.addDataPoint(this.ecgChunkSize, xAxisPoint); 
    this.ecgChunkSize = this.ecgChunkSize + 1;
    xAxisPoint = xAxisPoint + 1;
    if(this.ecgChunkSize == this.ecgFileSize) {
    this.ecgChunkSize = 0;
    }
    }, 300);
}

// Method to add data and update the chart to make the graph real time
addDataPoint(index: number, xAxisPoint: number) : void {
  let iy = this.cardiacSamples[index].y;
  this.ecgChart.series[0].addPoint([xAxisPoint, iy], true, true);
  //Calling addDataPoint() above with redraw chart and shift as true
 }

.chart-container {
    display: block; 
    margin:0; 
    position: relative;
    height: calc(100vh - 450px - 40px);
    padding-top: 0;
}

<div #highchartsEcg class="chart-container"></div>

在这里，我每 300 毫秒用 addPoint() 调用 updateChart()。有了这个间隔，它会非常慢，但会保持一定的图形形状。但是，如果我以 Normal graph shape with 300ms interval Graph shape collapse with 100ms interval

Answer 1

我猜这和github上的问题一样：https://github.com/highcharts/highcharts/issues/8548

这可能是由动画引起的 - 默认情况下，动画持续时间为 1 秒。如果您每 ~ 100 毫秒更新一次图表，那么也要更改动画持续时间：

this.ecgChart.series[0].addPoint([xAxisPoint, iy], true, true, { duration: 95 });

注意： 动画持续时间应该小于更新间隔，所以我们确定动画会结束。