带有 Angular 的 NG2 图表：无法绑定到“颜色”，因为它不是 Angular 中“画布”的已知属性 13

Question

<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [type]="barChartType" [colors]="chartColors"></canvas>代码：

  public chartColors: Array<any> = [
{
  backgroundColor: ['#d13537', '#b000b5']
}

] 我收到错误消息：- 无法绑定到“颜色”，因为它不是“画布”的已知属性。 我正在使用 "@angular/cdk": "^13.1.1", "@angular/common": "~13.0.0", "ng2-charts": "^3.0.8", "chart.js": “^3.7.1”，我的工作代码“@angular/common”：“^7.2.5”位于 url https://stackblitz.com/edit/ng2-charts-bar-and-line-qkglqd

Answer 1

不要使用 [colors] 参数，而是使用 [data] 并在 dataSet 中包含一个 backgroundColor 数组。 像这样：

HTML

<canvas baseChart
        [data]="barChartData"
        [labels]="barChartLabels"
        [type]="barChartType">
</canvas>

TS

import { ChartData, ChartType } from 'chart.js';

...

  public barChartType: ChartType = 'bar'
  public barChartLabels: string[] = ['Label 1', 'Label 2', 'Label 3'];
  public barChartData: ChartData<'bar'> = {
    labels: this.barChartLabels,
    datasets: [
      {
        label: "Title label",
        data: [5, 3, 1],
        backgroundColor: ["red", "green", "blue"],
        hoverBackgroundColor: ["darkred", "darkgreen", "darkblue"],
      }
    ]
  };

看来您正在使用不同版本的配置。 这种方法对我有用 Angular 12 和“ng2-charts”：“^3.0.8”。 您可以在此处阅读当前版本的文档： https://www.chartjs.org/docs/latest/charts/bar.html

Answer 2

与 Angular 13.2.3 有同样的问题！

Aso，体验过将 canvas 放入

<ng-template>

不会导致构建错误，但图表不会出现。