Highcharts addPoint () вызывается за короткий промежуток времени, вызывая разрушение формы графика - PullRequest
Новая
       50

Highcharts addPoint () вызывается за короткий промежуток времени, вызывая разрушение формы графика

0 голосов
/ 28 июня 2018 

// 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>

Здесь я вызываю updateChart () с addPoint () каждые 300 миллисекунд. С этим интервалом он очень медленный, но сохраняет форму графика. Но если я вызову updateChart () с Нормальная форма графика с интервалом 300 мс Обвал формы графика с интервалом 100 мс

1 Ответ

0 голосов
/ 29 июня 2018

Я думаю, это тот же вопрос, что и на github: https://github.com/highcharts/highcharts/issues/8548

Вероятно, это вызвано анимацией - по умолчанию длительность анимации составляет 1 секунду. Если вы обновляете график каждые ~ 100 мс, то также меняйте продолжительность анимации: 

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

Примечание: Продолжительность анимации должна быть меньше интервала обновления, поэтому мы уверены, что анимация закончится.

...