如何不引入插件脚本为Chart.js饼图添加百分比标签

不需要引入任何额外插件脚本，直接基于当前使用的Chart.js 2.9.4原生能力，通过内置插件钩子就能实现扇区百分比标签的绘制。

完整可运行代码 #

直接替换原有代码即可，无新增外部依赖：

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [55, 49, 44, 24, 15];
var barColors = [
  "#b91d47",
  "#00aba9",
  "#2b5797",
  "#e8c3b9",
  "#1e7145"
];

new Chart("myChart", {
  type: "pie",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
      text: "World Wide Car Production"
    }
  },
  // 内置百分比标签绘制逻辑，无额外依赖
  plugins: [{
    id: 'piePercentLabel',
    afterDraw: function(chart) {
      const ctx = chart.ctx;
      // 计算数据总和
      const total = chart.data.datasets[0].data.reduce((sum, val) => sum + Number(val), 0);
      // 逐个扇区绘制百分比
      chart.data.datasets[0].data.forEach((val, index) => {
        const sectorMeta = chart.getDatasetMeta(0).data[index];
        // 获取扇区中心坐标
        const labelPos = sectorMeta.tooltipPosition();
        // 计算百分比，默认保留1位小数
        const percentText = `${(val / total * 100).toFixed(1)}%`;
        // 配置文本样式
        ctx.fillStyle = '#ffffff';
        ctx.font = 'bold 14px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        // 绘制标签
        ctx.fillText(percentText, labelPos.x, labelPos.y);
      });
    }
  }]
});
</script>

</body>
</html>

自定义调整说明 #

• 文本样式修改：调整fillStyle可修改文字颜色，修改font属性可调整字体大小、粗细、字体类型
• 百分比精度：修改toFixed()的入参，传入0就显示整数百分比，传入2就保留两位小数
• 标签位置：如果需要调整标签和扇区中心的偏移，可以在labelPos.x、labelPos.y的基础上加减固定偏移量即可

内容的提问来源于stack exchange，提问作者Gourav kr Singh