ng2-charts & chart.js - 更改背景颜色

Question

我正在使用 Angular 6，并尝试更改我刚刚使用 chart.js 创建的甜甜圈图的背景颜色。

我一直在关注这里完成的例子：https : //www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/

但是，无论我如何尝试更改背景颜色，无论是该示例中显示的方式还是其他方式，颜色始终与库提供的默认颜色相同。

任何人都可以帮助我展示一种方法来覆盖它吗？

组件.html：

  <canvas baseChart
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [chartType]="doughnutChartType"
          [options]="doughnutChartOptions"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>

组件.ts：

  public doughnutChartLabels: string[] = ['Running', 'Paused', 'Stopped'];
  public doughnutChartData: number[] = [this.activeProducers, this.pausedProducers, this.invalidProducers];
  public doughnutChartType = 'doughnut';
  public doughnutChartOptions: any = {
    backgroundColor: [
      'Red',
      'Yellow',
      'Blue',
    ],
    responsive: false,
  };

我想要的颜色是：

• 运行：#ced
• 暂停：#fda
• 停止：#fdd

创建了一个stackblitz：https ://stackblitz.com/edit/angular-ctydcu

Answer 1

添加以下属性：

 private donutColors = [
    {
      backgroundColor: [
        '#ced',
        '#fda',
        '#fdd',
      ]
    }
  ];

请注意，这是一个数组，而不是一个对象

然后，在模板中添加以下属性

[colors]="donutColors"

这是一个 Stackblitz 演示