Диаграмма не может прочитать несколько наборов данных из серверной части (отдельные данные в порядке)

Question

Я использую Angular 4, Chart.js 2.8.0 и ng2-charts 1.6.0 для создания диаграмм на моей веб-странице.Я вставил путь к chart.min.js (раздел скриптов) в файле angular-cli, а также импортировал ChartsModule в файл app.module.ts.

Сначала я создал диаграмму со статическими данными.как ниже, который работал нормально (после конструктора и до ngOnInit):

ts file

....
public barChartData: ChartDataSets[] = [
    {data: [1,2,3,4,5], 
      label: 'Data 1'},
    {data: [5,6,7,8,9], label: 'Data 2'}
  ];
....

html file

<div class="container">
    <div style="display: block">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType">
      </canvas>
    </div>
  </div>

Затем я попытался вернуть его обратно-конечные наборы данных (массивы чисел: например: [11,12,13,14,15]).У меня был один вызов, который читался после ngOnInit:

this.test2 = this.tests.testResults;

Я использовал один ввод данных, как показано ниже, и он работал нормально:

<div class="container">
    <div style="display: block" *ngIf="test2.length">
      <canvas baseChart
              [data]="test2"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType">
      </canvas>
    </div>
  </div>

Но как только я хочу сделатьэто два набора данных в файле ts, как показано ниже, он выдает ошибку «данные не определены».

файл ts (тест уведомления 2 - [11,12,13,14,15])

....
public barChartData: ChartDataSets[] = [
    {data: this.test2, 
      label: 'Data 1'},
    {data: [5,6,7,8,9], label: 'Data 2'}
  ];
....

html файл

<div class="container">
    <div style="display: block" *ngIf="barChartData.length">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType">
      </canvas>
    </div>
  </div>

что я тут не так делаю?

Answer 1

Я мог бы найти решение.Взгляните на эту ссылку .Я определил свою переменную, как показано ниже (это решило все ошибки, которые я упомянул выше):

private test2: any[] = [{ data: [] }];

также я меняю место вызова barChartData.

Сначала в классе экспорта:

public barChartData;

, а затем внутри моей функции, которая вызывает внутренние данные:

this.barChartData = [
            {data: this.test2, label: 'Data 1'},
            {data: this.test3, label: 'Data 2'}
          ];

Это сработало для меня.

Answer 2

Вы вставляете данные динамически, поэтому необходимо внести изменения при изменении.Вам понадобится ChangeDetectorRef для этого.Выполните следующие шаги:

1) Добавьте это в ваш импорт:

import { ChangeDetectorRef } from '@angular/core';

2) Добавьте это в конструктор:

private cdRef: ChangeDetectorRef

3) После изменения данных сделать это:

this.cdRef.detectChanges();