如何在ChartJS饼图扇区内显示百分比数值

方法一：使用chartjs-plugin-datalabels插件（推荐） #

这是最简便的实现方式，你代码中已经注释了插件注册代码，只需完成以下步骤：

1. 引入插件
   通过npm安装或本地引入chartjs-plugin-datalabels插件（建议使用项目依赖管理或本地部署，避免外链依赖）。

2. 启用插件注册
   取消createChart函数中注释的插件注册代码：

   function createChart(ctx,config){
     Chart.defaults.font.size = 13;
     Chart.defaults.color="#fff";
     Chart.defaults.elements.line.cubicInterpolationMode="default";
     Chart.register(ChartDataLabels); // 取消注释
     new Chart(ctx, config);
   }
   

3. 配置数据标签
   修改configPie1的配置，添加数据标签的格式化规则：

   const configPie1={
     type: 'pie',
     data: {
       datasets:[]
     },
     options: {
       maintainAspectRatio: false,
       responsive: true,
       plugins: {
         datalabels: {
           // 计算并格式化百分比
           formatter: (value, ctx) => {
             const total = ctx.dataset.data.reduce((sum, current) => sum + current, 0);
             return `${(value / total * 100).toFixed(1)}%`;
           },
           color: "#fff", // 匹配你设置的文本颜色
           font: {
             size: 13 // 匹配默认字体大小
           }
         }
       }
     },
   };
   

方法二：原生ChartJS回调实现（无需额外插件） #

如果不想依赖第三方插件，可以通过afterDraw回调手动绘制百分比文本：

修改configPie1的配置：

const configPie1={
  type: 'pie',
  data: {
    datasets:[]
  },
  options: {
    maintainAspectRatio: false,
    responsive: true,
    plugins: {
      afterDraw: (chart) => {
        const ctx = chart.ctx;
        ctx.save();
        // 匹配你的全局字体设置
        ctx.font = `${Chart.defaults.font.size}px sans-serif`;
        ctx.fillStyle = Chart.defaults.color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        chart.data.datasets.forEach(dataset => {
          const total = dataset.data.reduce((sum, val) => sum + val, 0);
          const meta = chart.getDatasetMeta(0);
          
          meta.data.forEach((arc, index) => {
            const center = arc.getCenterPoint();
            const percentage = `${(dataset.data[index] / total * 100).toFixed(1)}%`;
            ctx.fillText(percentage, center.x, center.y);
          });
        });
        ctx.restore();
      }
    }
  },
};

额外代码优化提示 #

你的setConfig函数中，ar变量未声明会造成全局污染，建议修改为：

if (config.type === 'pie') {
  let ar = []; // 添加let声明
  for (i in data) {
      ar.push(data[i][data[i].length - 1]);
  }
  // ... 其余代码不变
}

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