javascript - 带 Angular : Can't bind to 'colors' since it isn't a known property of 'canvas' in Angular 13 的 NG2 图表

Question

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

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

]我收到错误:-无法绑定(bind)到“颜色”，因为它不是“ Canvas ”的已知属性。我在用"@angular/cdk": "^13.1.1","@angular/common": "~13.0.0",“ng2-图表”:“^3.0.8”，"图表.js": "^3.7.1",我的工作代码“@angular/common”:“^7.2.5”在 url https://stackblitz.com/edit/ng2-charts-bar-and-line-qkglqd

Answer 1

不使用 [colors] 参数，而是使用 [data] 并在数据集中包含一个 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