1

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

例如，以下组件代码：

HTML：

<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() {
  }

}

类（TS）：

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;
}

像这样消费：

this.realTimeUsage = new DoughnutChart();
this.realTimeUsage.Type = 'doughnut';
this.realTimeUsage.Title = LocalizationMessages.getMessage(this.locale, "USAGE_TITLE");
this.realTimeUsage.Colors = [{
  backgroundColor: [
    "rgb(255, 0, 0)", // red
    "rgb(0, 255, 0)", // green
  ],
},
{
  backgroundColor: [
    "rgb(255, 0, 0)", // red
    "rgb(0, 255, 0)", // green
  ],
},
{
  backgroundColor: [
    `#${colorGray}`, // gray
    "rgb(0, 0, 0)", // black
  ],
},];
this.realTimeUsage.DataSets = [
  // Outer doughnut data starts
  {
    data: [
      payload.declared,
      0,
    ],
  },
  // Outer doughnut data ends
  // Middle doughnut data starts
  {
    data: [
      payload.active,
      payload.declared - payload.active,

    ],
  },
  // Middle doughnut data ends
  // Inner doughnut data starts
  {
    data: [
      payload.connected,
      payload.active - payload.connected,
    ],
  }
  // Inner doughnut data ends
];
this.realTimeUsage.Options = {
  rotation: 0.75 * Math.PI, //-0.75 * Math.PI - Math.PI / 2,
  circumference: 0.75 * 2 * Math.PI,
  legend: {
    position: 'right',
    //labels: {
    //  generateLabels: this.generateLabels
    //}
  },
  showAllTooltips: false,
  responsive: true,
  tooltips: {
    // remove the square color from the tooltip
    displayColors: false,
    callbacks: {
      // Only display the value in the tooltip
      label: (tooltipItem, data) => {
        const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        return String(value);
      }
    }
  }

};

使用以下有效负载：

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

产生以下结果：

在此处输入图像描述

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

我不明白为什么传说没有反映正确的颜色以及为什么其中一个被划掉了。

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

4

0 回答 0