如何在Chart.js环形图中实现文本居中？解决多屏幕位置偏移问题

你的代码存在几个导致文本位置偏移的问题，以下是修正后的实现，确保文本在任何屏幕尺寸下都居中：

Chart.pluginService.register({
  beforeDraw: function(chart) {
    const width = chart.chart.width;
    const height = chart.chart.height;
    const ctx = chart.chart.ctx;

    // 重置上下文状态，避免受其他绘制影响
    ctx.restore();

    // 绘制中心圆形背景
    ctx.beginPath();
    // 根据图表高度动态计算字体大小，保证跨屏幕比例一致
    const fontSize = (height / 114).toFixed(2);
    ctx.font = `${fontSize}em sans-serif`;
    // 圆形中心与图表中心对齐
    ctx.arc(width / 2, height / 2, 55, 0, 2 * Math.PI);
    ctx.fillStyle = '#006072';
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#CBE1EF';
    ctx.stroke();

    // 设置文本对齐核心属性，确保居中
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'white';

    // 生成文本内容
    const text = "$" + Math.round(round_number / Math.pow(10, zeroCount)) + "M +";
    // 直接以图表中心作为文本绘制坐标
    ctx.fillText(text, width / 2, height / 2);

    ctx.save();
  }
});

关键修正说明： #

• 调整代码执行顺序：原代码提前调用fillText时文本变量尚未定义，修正后先完成背景绘制和文本属性配置，再生成并绘制文本。
• 启用原生文本对齐：添加ctx.textAlign = 'center'和ctx.textBaseline = 'middle'，让文本自动以指定坐标为中心对齐，无需手动计算偏移量。
• 简化位置计算：直接使用图表中心坐标width/2、height/2作为文本位置，避免固定比例（如height/1.9）导致的垂直偏移。
• 清理冗余代码：移除重复的fillText和save调用，避免上下文状态混乱。

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