ng2-charts 甜甜圈图中的多级颜色

Question

我开始在 Angular 中使用 Chart.js 和 ng2-Charts。现在我正在做甜甜圈图，想做一个 多级图表 但不能更改每个级别的颜色。我选择的颜色只有第一层，其他的没有。

这是我的甜甜圈-chart.component.ts:

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

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

export class DoughnutChartComponent {

  doughnutChartLabels: Label[] = ['SPD', 'CDU', 'Grüne', "Linke", "FDP", "AFD", "Andere"];
  doughnutChartData: MultiDataSet = [
    [33, 21, 9, 9, 11, 13, 5 ],
    [35, 20, 10, 10, 15, 15, 10 ],
    [40, 15, 5, 15, 20, 5, 20 ]
  ];

  public doughnutChartColors: Color[] = [
    {
      backgroundColor:
      [
      'red',
      'black',
      'green',
      "purple",
      "yellow",
      "blue",
      "grey"
      ],
      hoverBackgroundColor:
      [
      "lightgrey",
      "grey",
      "lightgrey",
      "grey",
      "lightgrey",
      "grey",
      "lightgrey",
      ],
    }
  ];

  doughnutChartType: ChartType = 'doughnut';

  doughnutChartOption: ChartOptions = {}
    
}

有人知道该怎么做吗？我在 Internet 上找不到任何关于此主题的内容。

Answer 1

您可以将数据定义为 ChartDataSets 的数组，而不是将数据定义为 MultiDataSet，并如下定义每个 dataset 的颜色。

doughnutChartData: ChartDataSets[] = [
    {
      label: 'Dataset A',
      data: [33, 21, 9, 9, 11, 13, 5 ],
    }, {
      label: 'Dataset B',
      data: [35, 20, 10, 10, 15, 15, 10 ],
    }, {
      label: 'Dataset C',
      data: [40, 15, 5, 15, 20, 5, 20 ],
    }    
  ];

  ngOnInit() {
    this.doughnutChartData.forEach(ds => {
      ds.backgroundColor = ['red', 'black', 'green', "purple", "yellow", "blue", "grey"];
      ds.hoverBackgroundColor = ["lightgrey", "grey", "lightgrey", "grey","lightgrey", "grey", "lightgrey"];
    });
  }

HTML 模板必须如下所示：

<canvas baseChart
  [chartType]="doughnutChartType"
  [labels]="doughnutChartLabels"    
  [datasets]="doughnutChartData"
  [options]="doughnutChartOption">
</canvas>

请看看这个 StackBlitz 看看它是如何工作的。

ng2-charts 甜甜圈图中的多级颜色

Multi Level Color in Doughnut Chart in ng2-charts

typescript

chart.js

ng2-charts

angular