Angular 8&ChartJs饼图变色

Question

我正在尝试更改默认饼图颜色。但所有 3 个饼图都显示红色。将 pieColor 数组中的第一种颜色应用于所有圆弧。我正在使用 chart.js 2.9.3、ng2-charts 2.3.0 & angular 8。此外，我正在尝试不同的颜色格式，如十六进制代码或 RGB，但无法正常工作。

饼图-chart.component.html

<div class="chart-wrapper">
    <canvas baseChart 
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [colors]="pieColor
    [chartType]="doughnutChartType">
  </canvas>
</div>

饼图-chart.component.ts

import { Component } from '@angular/core';
import { ChartType } from 'chart.js';
import { MultiDataSet, Label } from 'ng2-charts';

@Component({
  selector: 'app-doughnut-chart',
  templateUrl: './doughnut-chart.component.html',
  styleUrls: ['./doughnut-chart.component.css']
})

export class DoughnutChartComponent {

  doughnutChartLabels: Label[] = ['BMW', 'Ford', 'Tesla'];
  doughnutChartData: MultiDataSet = [
    [55, 25, 20]
  ];
  doughnutChartType: ChartType = 'doughnut';
  public pieColor: Color[] = [
     { backgroundColor: 'red' },
     { backgroundColor: 'green' },
     { backgroundColor: 'blue' }
  ]
}

输出

Answer 1

您的问题是颜色数组的形式。您不应定义多个 backgroundColor 数组，每个数组具有一种颜色，您应该只定义一个具有多种颜色的数组。试试下面，它应该工作：

模板

<div class="chart-wrapper">
  <canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [colors]="colors"
    [chartType]=" doughnutChartType">
  </canvas>
</div>

控制器

export class AppComponent {
  doughnutChartLabels: Label[] = ['BMW', 'Ford', 'Tesla'];

  doughnutChartData: MultiDataSet = [
    [
      55,
      25,
      20
    ]
  ];

  doughnutChartType: ChartType = 'doughnut';

  colors: Color[] = [
    {
      backgroundColor: [
        'red',
        'green',
        'blue'
      ]
    }
  ];

}

Answer 2

在你的打字稿中定义你想为每个部分指定的颜色

public donutColors=[
    {
      backgroundColor: [
          'rgba(92, 184, 92,1)',
          'rgba(255, 195, 0, 1)',
          'rgba(217, 83, 79,1)',
          'rgba(129, 78, 40, 1)',
          'rgba(129, 199, 111, 1)'
    ]
    }
  ];

并在html中添加

[colors]="donutColors"

Angular 8&ChartJs饼图变色

Angular 8 & ChartJs change color in pie chart

chart.js

ng2-charts

angular