多环甜甜圈的颜色和图例

Question

我正在尝试使用mdbootstrap制作多环甜甜圈。 我的问题是我不太清楚数据集/颜色和标签之间的关系。

例如，以下组件代码：

HTML：

-fno-elide-constructors

组件（TS）：

<canvas mdbChart
              height="100"
              [chartType]="doughnutChart.Type"
              [data]="doughnutChart.Data"
              [datasets]="doughnutChart.DataSets"
              [labels]="doughnutChart.Labels"
              [colors]="doughnutChart.Colors"
              [options]="doughnutChart.Options"
              [legend]="true"
              (Hover)="doughnutChart.Hover($event)"
              (Click)="doughnutChart.Click($event)"></canvas>

班级（TS）：

import { Component, OnInit , Input} from '@angular/core';
import { DoughnutChart } from './doughnutchart';

@Component({
  selector: 'app-doughnut-chart',
  templateUrl: './doughnutchart.component.html',
  styleUrls: ['./doughnutchart.component.css']
})
export class DoughnutchartComponent implements OnInit {

  @Input() doughnutChart: DoughnutChart;
  constructor() { }

  ngOnInit() {
  }

}

像这样消费：

export class DoughnutChart {
  Type: string;
  Data: Array<any>;
  DataSets: Array<any>;
  Labels: Array<any>;
  Colors: Array<any>;
  Options: any;
  Title: string;
  Hover: (event) => void;
  Click: (event) => void;
}

具有以下有效负载：

  

{“已声明”：4，“活动”：3，“已连接”：2}

产生以下结果：

每个甜甜圈应显示2个值，对应于最后一个（右侧）的颜色必须是透明的。目标是要有一个充满圆环的外部甜甜圈，一个显示较小部分环的中间甜甜圈以及一个最小的内圈甜甜圈。

我不理解为什么这些图例无法反映正确的颜色，以及为什么其中之一会被划掉。

编辑1 ：我使用3个数据值解决了图例问题。颜色问题仍然存在。