代码之家 › 专栏 › 技术社区 › Cody Pritchard

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

chart.js charts twitter-bootstrap angular

0

Cody Pritchard · 技术社区 · 7 年前

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

  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

1 回复 | 直到 7 年前

1

8

user184994 7 年前

添加以下属性:

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

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

[colors]="donutColors"

Here is a Stackblitz demo