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

Question

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

我一直在遵循此处完成的示例：https://www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/

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

请问有人可以帮我给我一个解决方法吗？

component.html：

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

component.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

创建了一个堆叠闪电战：https://stackblitz.com/edit/angular-ctydcu

Answer 1

添加以下属性：

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

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

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

[colors]="donutColors"

Here is a Stackblitz demo