Angular中Chart.js环形图(Doughnut)使用formatter展示百分比不生效

问题原因 #

你当前遇到的datalabels formatter不生效的核心是chartjs-plugin-datalabels属于Chart.js的独立插件，默认不会集成在基础包和ng2-charts（Angular封装的Chart.js库）中，需要额外安装、注册并绑定到图表组件。

解决步骤 #

1. 安装对应版本的插件 #

要注意插件版本和你项目中Chart.js版本兼容：

• Chart.js v2.x → 安装chartjs-plugin-datalabels@1.x
• Chart.js v3.x → 安装chartjs-plugin-datalabels@2.x
• Chart.js v4.x → 安装chartjs-plugin-datalabels@3.x
  安装命令示例（以Chart.js v4适配版本为例）：
  npm install chartjs-plugin-datalabels --save

2. 组件中注册插件 #

在你的环形图对应的ts组件文件中，导入插件并声明插件数组：

// 顶部导入插件
import * as ChartDataLabels from 'chartjs-plugin-datalabels';

// 组件类内部新增插件配置
public doughnutChartPlugins = [ChartDataLabels];

3. 补充HTML组件绑定 #

在canvas的baseChart属性中新增plugins绑定：

<canvas baseChart class="chart" [data]="doughnutChartData" [labels]="doughnutChartLabels"
        [options]="doughnutChartOptions" [chartType]="doughnutChartType"  
        [colors]="doughnutChartColors" [plugins]="doughnutChartPlugins">
</canvas>

4. 完善图表配置 #

在doughnutChartOptions的datalabels配置中新增display: true强制开启标签渲染，同时确认你的doughnutChartData格式符合要求：

public doughnutChartOptions: any = {
  animation: false,
  responsive: true,
  legend: {
    display: true,
    labels: {
      fontColor: '#9aa0ac',
    },
  },
  plugins: {
    datalabels: {
      display: true, // 新增这行强制开启标签
      formatter: (value, ctx) => {
        let sum = 0;
        let dataArr = ctx.chart.data.datasets[0].data;
        dataArr.map(data => {
            sum += data;
        });
        let percentage = (value*100 / sum).toFixed(2)+"%";
        return percentage;
      },
      color: '#fff',
    }
  }
};

// 确认doughnutChartData赋值格式正确，示例：
doughnutChartData = [
  { data: [30, 40, 30] } // 必须是包在对象内的data属性结构，不能直接放数值数组
];

做完以上步骤后重新编译项目即可看到环形图上的百分比标签。

内容的提问来源于stack exchange，提问作者zohra makhloufi