React+Chart.js：如何为饼图添加含数值与百分比的自定义图例

要实现包含标签名、数值、百分比且换行显示的自定义图例，只需修改options中legend.labels的配置，核心是开启HTML支持并自定义标签生成逻辑：

修改后的完整配置代码 #

function PieData() {
  // 提前计算数据总和，用于百分比计算
  const total = foods.reduce((acc, item) => acc + item.value, 0);

  setData({
    labels: foods.map(food => food.label),
    datasets: [
      {
        label: 'Foods',
        data: foods.map(food => food.value),
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
        ],
        borderWidth: 1,
      },
    ],
  });

  setOptions({
    responsive: true,
    plugins: {
      legend: {
        position: 'right',
        rtl: true,
        labels: {
          usePointStyle: true,
          pointStyle: 'circle',
          useHTML: true, // 开启HTML解析，支持<br/>换行
          padding: 15, // 增加内边距，优化换行后的排版
          generateLabels: (chart) => {
            const dataset = chart.data.datasets[0];
            
            return chart.data.labels?.map((label, index) => {
              const value = dataset.data[index] as number;
              const percentage = ((value / total) * 100).toFixed(1); // 保留1位小数，可按需调整
              return {
                text: `${label}<br/>${value} / ${percentage}%`, // 自定义换行格式
                fillStyle: dataset.backgroundColor[index], // 保留颜色标识
                strokeStyle: dataset.borderColor[index],
                lineWidth: dataset.borderWidth,
              };
            }) || [];
          },
        },
      },
    },
  });
}

关键说明 #

• useHTML: true：必须开启该配置，才能让图例标签解析HTML的<br/>实现换行效果
• generateLabels：自定义每个图例项的内容，通过遍历标签与数据，计算百分比后拼接成需求格式
• 颜色保留：在返回的图例对象中保留fillStyle和strokeStyle，确保颜色标识正常显示
• 样式优化：增加padding避免换行内容拥挤，提升可读性

饼图渲染代码保持不变：

<Pie id="pieChart" data={data} options={options}/>

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