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

Question

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

我首先使用如下静态数据创建图表，效果很好（在构造函数之后和 ngOnInit 之前）：

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>

然后，我尝试给它后端数据集（数字数组：例如：[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文件中制作两个数据集，它就会给出"data not defined"的错误。

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

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

1) 在您的导入中添加：

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

2) 在构造函数中添加：

private cdRef: ChangeDetectorRef

3) 更改数据后执行此操作：

this.cdRef.detectChanges();

Answer 2

我可以找到解决方案。看看这个 link。我如下定义我的变量（这解决了我上面提到的所有错误）：

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

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

首先，在出口class：

public barChartData;

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

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

这对我有用。

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

chart cannot read multiple datasets from the back-end (single data is fine)

angular

chart.js

ng2-charts