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文件中将其设为两个数据集，如下所示，就会出现“未定义数据”错误。

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的位置。

首先，在出口舱：

public barChartData;

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

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

这对我有用。

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

2 个答案: