Как изменить цвета указанных c меток в ng2-диаграммах? - PullRequest
Новая
       37

Как изменить цвета указанных c меток в ng2-диаграммах?

0 голосов
/ 24 января 2020

Я сделал кольцевую диаграмму, используя ng2-диаграммы в Angular 8. У меня есть три метки в моей кольцевой диаграмме: «Пройдено», «Неудачно» и «Открыть». Я хочу установить «Зеленый», «Красный» и «Синий» для этих ярлыков соответственно. Как мне это сделать? Мой файл Compliance.component. html Файл 

<div>
    <div>
        <div style="display: block">
            <canvas baseChart 
            [data]="doughnutChartData" 
            [labels]="doughnutChartLabels" 
            [chartType]="doughnutChartType"
            [options]="doughnutChartOptions"
            [colors]="doughnutChartColor">
            </canvas>
        </div>
    </div>
</div>

Мой файл Compliance.component.ts 

export class ComplianceComponent implements OnInit {

  public doughnutChartLabels: Label[] = ['Passed', 'Open', 'Fail'];
  public doughnutChartData: MultiDataSet = [
    [30, 20, 50]
  ];

  public doughnutChartType: ChartType = 'doughnut';
  constructor() { }

  ngOnInit() {
  }

  public doughnutChartColor: Array<any> = [
    { // first color
      'Passed'-color:green;
      'Failed'-color:red;
      'Open'-color:blue;
    }];

    public doughnutChartOptions={
      responsive: true
    };
}

Спасибо.

1 Ответ

0 голосов
/ 24 января 2020

colors должен быть определен как array из interface Color согласно следующему фрагменту кода: 

import { Color } from 'ng2-charts';
...
public doughnutChartColor: Color[] = [
    { backgroundColor: 'green' },
    { backgroundColor: 'red' },
    { backgroundColor: 'blue' }
];
...