在圆环图中显示标签答案

【问题标题】：display the labels in doughnut chart在圆环图中显示标签
【发布时间】：2021-09-24 10:13:03
【问题描述】：

我正在使用 Angular ng2-charts 在圆环图中显示数据，它在本地版本中一切正常，问题是当我在开发版本中推送项目时，圆环图上的标签消失了。我找不到问题出在哪里。

这是守则

  public doughnutChartLabels: Label[] = ['Test1', 'Test2', 'Test3'];
  public doughnutChartData: MultiDataSet;
  public doughnutChartType: ChartType = 'doughnut';
  public colors: any[] = [{ backgroundColor: ["#E3F0FD", "#C4F8DD", "#A499FF"] }];
  public chartOptions: any = {
  legend: {
    display: false,
   },
  pieceLabel: {
   render: function (args) {
    const label = args.label,
      value = args.value;
      return value +"%";
  },
  fontStyle: 'bold',
}
}

然后我以这种方式在 ngAfterViewInit 中调用 donutChartData

        this.doughnutChartData = [[Test1.data,Test2.data,Test3.data]]

在 HTML 中

<canvas id="myChart" #myChart baseChart [data]="doughnutChartData" [options]="chartOptions"
                    height="70" width="100" [colors]="colors" [labels]="doughnutChartLabels"
                    [chartType]="doughnutChartType">
                </canvas>

【问题讨论】：

标签： angular

【解决方案1】：

您可以添加插件chartjs-plugin-datalabels。来自example：

import * as pluginDataLabels from 'chartjs-plugin-datalabels';

...

public pieChartPlugins = [pluginDataLabels];

public pieChartOptions: ChartOptions = {
  ...,
  plugins: {
    datalabels: {
      formatter: (value, ctx) => {
        const label = ctx.chart.data.labels[ctx.dataIndex];
        return label;
      }
    }
  }
};

在你的模板中：

<canvas ...
  [plugins]="pieChartPlugins">
</canvas>

该插件需要 Chart.js 3.x。

【讨论】：