Angular 图表无法从后端读取多个数据集（单个数据即可）

我正在使用Angular 4、Chart.js 2.8.0和ng2 charts 1.6.0在我的网页中创建图表。我在angular cli文件中插入了chart.min.js scripts部分的路径，并在app.module.ts文件中导入了ChartsModule

我首先用静态数据创建了图表，如下所示，在构造之后和ngOnInit之前，这些静态数据运行良好：

this.test2 = this.tests.testResults;

ts文件

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

html文件

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

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

我使用了如下所示的单一数据输入，效果很好：

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

html文件

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

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

---

我做错了什么

您正在动态插入数据，因此需要对更改进行更新。为此，您需要ChangeDetectorRef。执行以下步骤：

1在您的导入中添加以下内容：

从'@angular/core'导入{ChangeDetectorRef}

2.在构造函数中添加以下内容：

私有cdRef:ChangeDetectorRef

3更改数据后，请执行以下操作：

---

this.cdRef.detectChanges

我能找到解决办法。看看这个。我将变量定义如下，这解决了我上面提到的所有错误：

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

此外，我还更改了调用barChartData的位置

首先，在出口类：

public barChartData;

然后，在调用后端数据的函数中：

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

---

这对我很有用。

谢谢你，奥瑞斯蒂斯，我仍然得到了这里没有定义的数据的相同错误：错误类型错误：newElm.data是未定义的数据集图表。js:123 getDatasets图表。js:117 getChartBuilder图表。js:57刷新图表。js:139 Ngonit图表。js:28 Angular 5 View_TestComponent_3 TestComponent。html:324 Angular 27 RxJS 5 Angular 8TestComponent.html:324:6也使用了本教程[但到目前为止没有成功！相同的错误！newElm.data是什么类型的变量？要提供的输入必须是数组。这意味着newElm=[1,2,3,4,5]或newElm.data=[1,2,3,4,5].Try console.lognewElm查看变量包含的内容这很奇怪！我没有任何newElm变量！因此，当我尝试console.log时，无法识别newElm！请确保将图表数据用作数组输入的有效值。让我知道！