angular - 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"

Here is a Stackblitz demo