如何创建react-chartjs插件？Doughnut环形图居中数据插件不生效排查

核心问题排查点 #

• 1. save/restore 顺序颠倒
     你自定义插件的 beforeDraw 钩子中，canvas 上下文的状态操作顺序完全错误：先执行了 ctx.restore() 再做绘制，最后才 ctx.save()。正确逻辑是先保存当前上下文状态，修改属性完成绘制后再恢复原有状态，修改后代码如下：

beforeDraw: function (chart) {
  const ctx = chart.ctx;
  // 先保存原始状态
  ctx.save();
  // 计算正确的中心坐标，使用绘图区域而非整个画布宽高，避免受留白、图例影响偏移
  const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
  const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
  const fontSize = (chart.height / 180).toFixed(2);
  ctx.font = `${fontSize}em Montserrat`;
  ctx.textBaseline = "middle"; // 改为middle更易实现垂直居中
  ctx.textAlign = "center";
  ctx.fillStyle = "#000"; // 手动指定文字颜色，避免和背景色重合看不见
  ctx.fillText(`40 / ${sikPercentage}%`, centerX, centerY);
  // 绘制完成后恢复上下文原始状态
  ctx.restore();
}

• 2. useEffect 依赖错误
     你的 useEffect 依赖数组写的是 dashboardInfoData，但实际取值用的是 useSelector 返回的 dashboardInfo，如果变量名不匹配会导致 useEffect 不会触发更新，plugins 和 data1 始终是初始值，自然不会渲染中心文字。
• 3. cutout 配置位置错误
     如果你使用的是 Chart.js v3 及以上版本，cutout （环形镂空比例）属于全局配置项，需要放在 options.cutout 中，而非写在 dataset 配置里，错误的配置会导致环形尺寸异常，文字位置偏移甚至被遮挡。
• 4. 自定义插件传递规则
     部分版本的 react-chartjs-2 要求单组件自定义插件需要放在 options.plugins 数组中，而非直接传递 plugins prop，可以尝试调整传递方式：

<Doughnut
  data={data1}
  options={{
    cutout: '90%',
    legend: false,
    plugins: plugins, // 插件放到options.plugins字段下
    // 其余原有配置保持不变
  }}
/>

• 5. 初始值兜底
     data1 初始值为 undefined，首次渲染时Doughnut组件可能出现异常，建议设置初始空值：const [data1, setData1] = useState({labels:[], datasets:[]})

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