角ng2-chart甜甜圈：自定义图例“颜色”和“单击”不起作用

Question

我正在实现角度ng2-chart的甜甜圈图。由于数据集是动态的，因此我以滚动方式以自定义方式显示“图例”，但无法在该自定义图例中显示“颜色”和“删除选项”。

任何人都可以帮助我找出我在做什么错误。

我的ts文件：

import {
  Component,
  OnInit,
  Input,
  ChangeDetectorRef,
  ViewChild
} from '@angular/core';
import { ChartType } from 'chart.js';
import { MultiDataSet, Label, BaseChartDirective } from 'ng2-charts';
// import 'chart.piecelabel.js';
// import 'chartjs-plugin-labels';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { AttritionModalContentComponent } from '../../attrition-modal-content/attrition-modal-content.component';

@Component({
  selector: 'app-commo-doughnut-chart',
  templateUrl: './commo-doughnut-chart.component.html',
  styleUrls: ['./commo-doughnut-chart.component.css']
})
export class CommoDoughnutChartComponent implements OnInit {
  @ViewChild('partsBaseChart') partsBaseChart: BaseChartDirective;
  chartFilterValue: string;
  bsModalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  private _chartFilter: string;
  public filtered_value;
  public select_duration;
  public from_date;
  public to_date;
  public getEmpBandList;
  public errorMsg;
  public chartFetchParameter: any;
  public chartCallFunction: any;
  public chartLabel: any;
  public attritionCountDisplay: any;
  public ss: any;
  public modal_content_part = 'Attrited';
  public cdRef: any;
  public partsChartLegendItems: any;

  @Input() from_page: any;

  @Input() labelIds: any;
  @Input() attritionPercentage: any;

  // Doughnut
  // public doughnutChartLabels: Label[] = [];
  @Input() doughnutChartLabels: Label[];
  @Input() attritionCount: any;

  // public doughnutChartData: MultiDataSet = [[5, 8, 3]];
  @Input() doughnutChartData: MultiDataSet = [];
  public doughnutChartType: ChartType = 'doughnut';

  public doughnutChartOptions: any = {
    cutoutPercentage: 55,
    responsive: true,
    /*position: 'outside',
    pieceLabel: {
      render: 'label'
    },*/
    tooltips: {
      // Disable the on-canvas tooltip
      enabled: true,
      callbacks: {
        title: (tooltipItem, data) => {
          var tooltipLabel = data['labels'][tooltipItem[0]['index']];

          if (tooltipLabel !== null) {
            return tooltipLabel.toUpperCase();
          } else {
            return '';
          }
        },
        label: (tooltipItem, data) => {
          var allData = data.datasets[tooltipItem.datasetIndex].data;
          var tooltipLabel = data.labels[tooltipItem.index];
          var tooltipData = allData[tooltipItem.index];
          var total_attritions: number = 0;
          // tslint:disable-next-line: forin
          for (let i in allData) {
            total_attritions = total_attritions + Number(allData[i]);
          }
          /*let tooltipPercentage = Math.round(
            (Number(tooltipData) / total_attritions) * 100
          );*/
          let tooltipPercentage = (
            (Number(tooltipData) / total_attritions) *
            100
          ).toFixed(2);

          if (this.from_page === 'absent') {
            let tooltipPercentageFormat = this.getAbsentPercentage(
              tooltipItem.index
            );
            return [
              ' Absent Count : ' + tooltipData,
              ' Absent Percentage : ' + tooltipPercentageFormat + '%',
              ' Total Absent : ' + total_attritions
            ];
          } else {
            let tooltipPercentageFormat = this.getAttritionPercentage(
              tooltipPercentage
            ).toFixed(2);
            return [
              ' Attrition Count : ' + tooltipData,
              ' Attrition Contribution : ' + tooltipPercentageFormat + '%',
              ' Total Attritions : ' + total_attritions
            ];
          }
        }
      },
      titleFontSize: 18
    },
    legend: {
      display: true,
      position: 'bottom',
      fullWidth: false,
      labels: {
        padding: 15,
        fontSize: 13,
        usePointStyle: true,
        fontColor: 'rgb(143, 142, 142)',
        boxWidth: 10
      }
      /*onClick: (e, legendItem) => {
        var index = legendItem.datasetIndex;
        var ci = this.chartLabel;
        var meta = ci.getDatasetMeta(index);

        // See controller.isDatasetVisible comment
        meta.hidden =
          meta.hidden === null ? !ci.data.datasets[index].hidden : null;

        // We hid a dataset ... rerender the chart
        ci.update();
      }*/
    },
    plugins: {
      datalabels: {
        display: false,
        //  position: 'Outside',
        font: {
          weight: 'normal',
          size: 19
        }
      }
    }
  };

  get chartFilter(): any {
    return this._chartFilter;
  }

  @Input()
  set chartFilter(value: any) {
    // console.log('value===', value);
    this.filtered_value = value[0].filter_name;
    this.select_duration = value[1].select_duration;
    this.from_date = value[2].from_date;
    this.to_date = value[3].to_date;
  }

  ngOnInit() {
    this.attritionCountDisplay = this.attritionCount;
    //this.cdRef.detectChanges();
    //this.partsChartLegendItems = this.partsBaseChart.chart.legend.legendItems;
    this.partsChartLegendItems = this.doughnutChartLabels;
  }

  legendOnClick(legendItem) {
    var index = legendItem.datasetIndex;
    alert(legendItem);
  }

  public getCount(index) {
    return this.attritionCount[index];
  }

  public getAttritionPercentage(attri_perc) {
    let calculated_perc = (attri_perc * this.attritionPercentage) / 100;
    return calculated_perc;
  }

  public getAbsentPercentage(index) {
    return this.attritionPercentage[index];
  }
}

我的html：

<div>
  <div>
    <div style="display: block">
      <canvas
        baseChart
        #partsBaseChart="base-chart"
        height="400"
        [data]="doughnutChartData"
        [labels]="doughnutChartLabels"
        [chartType]="doughnutChartType"
        [options]="doughnutChartOptions"
        (chartClick)="chartClicked($event)"
        (chartHover)="chartHovered($event)"
        [legend]="false"
      >
      </canvas>
    </div>
  </div>
</div>

<div *ngIf="partsBaseChart?.chart?.legend?.legendItems">
  <ul class="custom-legend-list">
    <li
      *ngFor="
        let item of partsBaseChart.chart.legend.legendItems;
        let i = index
      "
      class="custom-legend-item"
      (click)="legendOnClick(item.text)"
    >
      <span
        class="slice-color"
        [ngStyle]="{ 'background-color': item.fillStyle }"
      ></span>
      <span class="slice-title"
        >{{ item.text }} ({{ doughnutChartData[i] || 0 }})
      </span>
    </li>
  </ul>
</div>

使用上面的代码，我得到以下输出：

有人可以帮我吗？