Chart.js中afterDatasetUpdate插件触发但无法显示文本的问题

控制台能打印console.log('here');和console.log(args.meta._dataset.data[0]);的日志，说明数据集变化时函数已触发，但看不到绘制的文本，可能是什么原因？

相关代码 #

Props:

const updateGaugeChartText = {
  id: 'currentChartValue',
  afterDatasetUpdate(chart: any, args: any, pluginOptions: any) {
    const { ctx } = chart;
    ctx.save();
    console.log('here');
    console.log(args.meta._dataset.data[0]);
    const xCoor = chart.getDatasetMeta(0).data[0].x;
    const yCoor = chart.getDatasetMeta(0).data[0].y;
    ctx.textAlign = 'center';
    ctx.font = '32px sans-serif';
    ctx.fillText(args._dataset, xCoor, yCoor);
  },
};

const options = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    tooltip: {
      enabled: false,
    },
  },
};

const data = {
  labels: [],
  datasets: [
    {
      data: [exactValue, item.minMaxValue.max - exactValue],
      backgroundColor: [bgColor2, bgColor3],
      hoverOffset: 0,
      borderWidth: 0,
      cutout: '70%',
      circumference: 180,
      rotation: 270,
    },
  ],
};

Component:

<Doughnut plugins={[updateGaugeChartText]} ref={chart} options={options} data={data} />

• 文本内容传错：调用ctx.fillText时传入的是args._dataset（整个数据集对象），不是要显示的数值。应该替换成你已经在控制台打印的args.meta._dataset.data[0]，并且转成字符串避免异常。
• 绘制坐标错误：你用的是第一个数据点的坐标chart.getDatasetMeta(0).data[0].x/y，对于半圆仪表盘（circumference:180、rotation:270），这个点大概率在图表边缘甚至外部，导致文本被裁切或超出可视区域。建议直接用图表中心坐标：chart.width/2和chart.height/2，同时加上ctx.textBaseline = 'middle'保证垂直居中。
• 文本颜色未设置：默认文本颜色可能和图表背景/填充色一致，导致看不见。手动设置ctx.fillStyle为对比明显的颜色（比如#000黑色）。
• 绘制时机不合适：afterDatasetUpdate钩子执行后，图表后续的绘制步骤可能会覆盖你画的文本。换成afterDraw钩子，这个钩子在整个图表绘制完成后执行，不会被后续操作覆盖。

修正后的插件示例 #

const updateGaugeChartText = {
  id: 'currentChartValue',
  afterDraw(chart: any, args: any, pluginOptions: any) {
    const { ctx } = chart;
    ctx.save();
    const displayValue = args.meta._dataset.data[0];
    // 使用图表中心作为绘制坐标
    const xCoor = chart.width / 2;
    const yCoor = chart.height / 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = '32px sans-serif';
    ctx.fillStyle = '#000'; // 设置可见的文本颜色
    ctx.fillText(displayValue.toString(), xCoor, yCoor);
    ctx.restore();
  },
};

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