Блог

Я пытаюсь получить график для отображения моих данных с помощью ng2-charts. С использованием макетных данных все работает нормально, однако, когда я пытаюсь выполнить итерацию по массиву, переданному моим родительским компонентом, сам график не отображается, только ортогональная метка, и в консоли ничего не отображается. Я сузил проблему до массива меток: если вы удалите прокомментированную строку в LineChartComponent, это сработает.

Вот мой код :

 import { Component, Input } from '@angular/core';
import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
import { Traffic } from './traffic';

@Component({
  selector: 'line-chart-component',
  directives: [CHART_DIRECTIVES],
  styles: [`
    .chart {
      display: block;
    }
  `],
  template: `
  <div style="display: block">
        <canvas baseChart
              [datasets]="datasets"
              [labels]="labels"
              [chartType]="'line'"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
        </div>
  `
})

export class LineChartComponent {
  _dataArray: Traffic[] = [];    
  private datasets = [
      {
        label: "Desktop",
        data: []
      }
    ];    
  private labels: string [] = [];

  @Input()
  set dataArray(dataArray: Traffic[]) {
    dataArray.forEach((data: any,index: number) => {
      this.datasets[0].data.push(Math.round(data.Value));
      this.labels.push(data.Date));
    });
    // this.labels = ['0','1','2','3','4','5','6','7','8','9','10','11'];
  }

  get dataArray() { return this._dataArray; }

  private options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };
}
  

Примечание: Ни один из массивов не определен. И оба имеют хорошую структуру, содержат все мои данные и имеют соответствующую типизацию. Кроме того, Data.date возвращает строку.

Что может привести к такому поведению?

Спасибо!

Итак, вот ответ: похоже, что между двумя массивами существует какое-то условие гонки. Я предполагаю, что ввод меток занимает больше времени, чем ввод чисел, и поэтому график не загружается должным образом. Вызов this.datasets = this.datasets.slice(); в конце моего установщика для обновления графика сделал свое дело.