ChartJS Datalabels：如何在饼图同时显示数值与百分比？

你只需要修改options里datalabels的formatter函数，将当前扇区的数值与计算出的百分比拼接成目标格式返回即可。另外可以用reduce替代map来求和，代码更简洁高效：

const data = {
    labels: ['America', 'China', 'Dubai', 'India'],
    datasets: [
      {
        label: 'Work Orders',
        data: [10, 50, 5, 2],
        backgroundColor: [
          '#00CF9B',
          '#E55B5E',
          '#FFD366',
          '#5A9ED4',
        ],
        borderWidth: 0,
      },
    ],
  };

  const options = {
    plugins: {
      legend: {
        position: 'right'
      },
      datalabels: {
        color: 'black',
        font: {
          weight: 'bold'
        },
        formatter: (value, ctx) => {
          const dataArr = ctx.chart.data.datasets[0].data;
          // 用reduce计算总和，比map更高效
          const sum = dataArr.reduce((total, num) => total + num, 0);
          const percentage = (value * 100 / sum).toFixed(2) + "%";
          // 拼接数值和百分比，返回目标格式
          return `${value}(${percentage})`;
        },
      }
    }
  }

<Pie data={data} options={options} />

修改后，饼图的每个扇区就会显示类似10(12.82%)、50(64.10%)这样的格式，完全符合需求。

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