react-chartjs-2中如何在Doughnut环形图扇区上添加文字？

要在Doughnut环形图的每个扇区上添加文字，核心是利用Chart.js的自定义插件机制，通过afterDraw钩子在图表绘制完成后，计算每个扇区的中心坐标并绘制文字。以下是具体实现步骤：

步骤1：编写自定义Chart.js插件 #

创建一个插件，在图表绘制完成后遍历每个扇区，计算其中心位置，然后绘制对应文字：

const doughnutLabelPlugin = {
  id: 'doughnutLabel',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    ctx.save();
    const chartCenterX = chart.chartArea.left + chart.chartArea.width / 2;
    const chartCenterY = chart.chartArea.top + chart.chartArea.height / 2;
    
    // 遍历每个数据集的扇区
    chart.data.datasets.forEach((dataset, datasetIndex) => {
      const meta = chart.getDatasetMeta(datasetIndex);
      meta.data.forEach((arc, index) => {
        // 计算扇区的中心角度和坐标
        const angle = (arc.startAngle + arc.endAngle) / 2;
        const radius = arc.outerRadius;
        // 调整文字距离扇区边缘的偏移量（可根据需求修改）
        const offset = 10;
        const x = chartCenterX + Math.cos(angle) * (radius - offset);
        const y = chartCenterY + Math.sin(angle) * (radius - offset);
        
        // 设置文字样式
        ctx.font = '14px Arial';
        ctx.fillStyle = '#fff'; // 文字颜色，可根据扇区颜色调整
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // 绘制文字（这里用数据标签，可替换成自定义文本）
        const label = chart.data.labels[index];
        ctx.fillText(label, x, y);
      });
    });
    ctx.restore();
  }
};

步骤2：在React组件中使用插件 #

将自定义插件传入Doughnut组件的plugins属性中：

import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

// 注册Chart.js必需的元素
ChartJS.register(ArcElement, Tooltip, Legend);

// 上面定义的doughnutLabelPlugin插件

const MyDoughnutChart = () => {
  const data = {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [
      {
        data: [30, 20, 25, 25],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
        borderWidth: 1,
      },
    ],
  };

  return (
    <Doughnut
      data={data}
      plugins={[doughnutLabelPlugin]}
      options={{
        cutout: '70%', // 环形图的内圈大小，可调整
      }}
    />
  );
};

export default MyDoughnutChart;

关键细节调整 #

• 文字位置偏移：修改offset值可以调整文字距离扇区边缘的远近
• 文字样式：通过ctx.font、ctx.fillStyle等属性调整文字的字体、颜色、大小
• 自适应文字：如果扇区过小，可添加判断逻辑，比如当扇区角度小于一定值时不显示文字，避免重叠
• 文字方向：对于角度较大的扇区，可通过旋转文字（ctx.rotate()）来优化显示效果

你想要实现的效果类似以下示例图：

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