React-ChartJS-2+TS：带顶部标题右侧图例的环形图内部添加文本

你当前的代码之所以文本显示在画布中间而非环形图内部，是因为你用了整个画布的width和height计算位置，但顶部标题、右侧图例已经占用了部分画布空间，环形图的实际绘图区域（chartArea）是画布内的一块子区域，而非整个画布。

修改后的插件代码 #

直接替换你的setPlugins部分，核心是基于环形图的实际绘图区域计算文本位置：

import { Chart } from 'chart.js';

// 定义中心文本插件
const centerTextPlugin: Chart.Plugin = {
  id: "centerText",
  beforeDraw: (chart) => {
    const ctx = chart.ctx;
    // 获取环形图的实际绘图区域（排除标题、图例占用的空间）
    const chartArea = chart.chartArea;
    if (!chartArea) return;

    // 先保存当前绘图状态，避免干扰图表原有绘制逻辑
    ctx.save();

    // 根据绘图区域高度动态计算字体大小，适配环形尺寸
    const fontSize = (chartArea.height / 4).toFixed(2);
    ctx.font = `${fontSize}px sans-serif`;
    // 设置文本居中对齐，确保在环形正中间
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    const text = "Foo-bar";
    // 基于绘图区域的中心坐标定位文本
    const textX = chartArea.left + chartArea.width / 2;
    const textY = chartArea.top + chartArea.height / 2;

    ctx.fillText(text, textX, textY);
    // 恢复之前的绘图状态
    ctx.restore();
  }
};

// 组件中使用时无需as any，直接传入插件数组
<Doughnut id="pieChart" data={data} options={options} plugins={[centerTextPlugin]} />

关键改动说明 #

• 改用chart.chartArea获取环形图的实际绘制区域，这个区域已经自动排除了标题、图例占用的空间
• 设置textAlign: "center"和textBaseline: "middle"，确保文本完全居中于环形内部
• 调整字体大小的计算基准为绘图区域高度，避免字体过大/过小适配环形尺寸
• 修正save()和restore()的调用顺序：先保存状态再绘制，绘制完成后恢复，避免破坏图表原有渲染逻辑

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