ng2-charts & chart.js - 改变背景颜色答案

【问题标题】：ng2-charts & chart.js - Change background colorng2-charts & chart.js - 改变背景颜色
【发布时间】：2018-11-11 20:57:29
【问题描述】：

我正在使用 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

【问题讨论】：

可以用颜色代码代替颜色名称吗？
@SunilSingh，请参阅我的帖子底部。我已经尝试过颜色代码，而文字字符串只是另一个测试。两者都没有覆盖图片中显示的默认颜色
如果你能创建stackblitz demo，那将很容易帮助你。

标签： angular twitter-bootstrap charts chart.js

【解决方案1】：

添加以下属性：

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

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

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

[colors]="donutColors"

Here is a Stackblitz demo

【讨论】：

太棒了。非常感谢。