Диаграмма. js Невозможно прочесть свойство «применить» неопределенного значения - PullRequest
Новая
       7

Диаграмма. js Невозможно прочесть свойство «применить» неопределенного значения

0 голосов
/ 09 июля 2020

Я пытался обновить диаграмму из диаграммы. js, но как только я вызываю метод pu sh, я получаю следующую ошибку: 

ERROR TypeError: Cannot read property 'apply' of undefined
    at Object.value (Chart.js:3574)
    at ErrorComponent.updateChart (error.component.ts:132)
    at ErrorComponent.set timelineChart [as timelineChart] (error.component.ts:38)
    at ErrorComponent_Query (error.component.ts:33)
    at executeViewQueryFn (core.js:13733)
    at refreshView (core.js:12059)
    at refreshComponent (core.js:13445)
    at refreshChildComponents (core.js:11716)
    at refreshView (core.js:12051)
    at refreshEmbeddedViews (core.js:13391)

Я создаю диаграмму, как только компонент angular создается, и когда приходят новые данные (HTTP-запросы), я обновляю его. Вот код, который у меня есть на данный момент: 

private static formatData(errorOccurences: ErrorOccurence[]): {x:Date,y:number}[] {
    if (!Array.isArray(errorOccurences)) {
      console.warn('ErrorOccurences is not an array');
      return;
    }

    const occurrencesByHour = {};
    for (const errorOccurence of errorOccurences) {
      const errorOccurenceTimeStampRounded = ErrorComponent.roundDateBy3Hours(new Date(errorOccurence.timeStamp));
      if (occurrencesByHour.hasOwnProperty(errorOccurenceTimeStampRounded)) {
        ++occurrencesByHour[ErrorComponent.roundDateBy3Hours(new Date(errorOccurence.timeStamp))];
      } else {
        occurrencesByHour[ErrorComponent.roundDateBy3Hours(new Date(errorOccurence.timeStamp))] = 1;
      }
    }

    const data: {x:Date,y:number}[] = [];
    for (const key of Object.keys(occurrencesByHour).map(q => parseInt(q))) {
      data.push({x: new Date(key), y: occurrencesByHour[key]})
    }
    console.log(data);
    return data;
  }

  private updateChart(): void {
    if (!this._chart) {
      return;
    }

    const data = ErrorComponent.formatData((this.reportedError as StandardReportedError).standardErrorOccurences);
    for (const dataLine of data) {
      console.log(dataLine);
      this._chart.data.datasets[0].data.push(dataLine);
    }

    this._chart.update();
    this.isLoadingOccurrences = false;
  }

  private createChart(element: ElementRef<HTMLCanvasElement>) {
    if (this._chart || !element) {
      return;
    }

    const occurrencesByHour = []
    let timeStamp = ErrorComponent.roundDateBy3Hours(new Date());
    for (let i = 0; i < 24;i++) {
      occurrencesByHour.push(new Date(timeStamp - (10800000 * i)));
    }

    this._chart = new Chart(element.nativeElement, {
      type: 'line',
      data: {
        labels: occurrencesByHour,
        datasets: [{
          data: {}
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        fill: 'start',
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            type: 'time',
            distribution: 'series'
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }

Это мой первый вопрос о переполнении стека, прошу прощения, если что-то неясно.

...