Angular 8 & Chart Js изменить цвет на графике p ie

Question

Я пытаюсь изменить цвет диаграммы по умолчанию p ie. но все 3 p ie диаграммы ar c показаны красным цветом. Примените первый цвет в массиве pieColor ко всем ar c. Я использую диаграмму. js 2.9.3, ng2-диаграммы 2.3.0 и angular 8. Кроме того, я пробую другой цветовой формат, такой как шестнадцатеричный код или RGB, но не работает.

p ie -chart.component. html

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

p ie -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'
      ]
    }
  ];

}