本文详解如何通过动态计算 canvas 尺寸与文本度量，实现 doughnut 图中心文本的响应式水平垂直居中，彻底解决多屏适配偏移问题。
本文详解如何通过动态计算 canvas 尺寸与文本度量，实现 doughnut 图中心文本的响应式水平垂直居中，彻底解决多屏适配偏移问题。
在使用 Chart.js 创建环形图（Doughnut chart）时，常需在图表中央添加汇总文本（如 "$12.5M+"）。但若直接使用固定坐标或经验系数（如 height / 1.9），文本极易因屏幕尺寸、缩放比例或 canvas 重绘导致偏移——尤其在响应式布局中表现明显。根本原因在于：文本的垂直居中不仅取决于 y 坐标，还需考虑字体基线（baseline）和行高特性。
以下是经过生产验证的完整解决方案，核心在于：
✅ 动态获取 canvas 实际宽高（chart.chart.width/height）
✅ 使用 ctx.measureText() 精确计算文本宽度，实现水平居中
✅ 基于字体度量调整垂直位置，避免“视觉偏上”（因 fillText 的 y 值指向文字基线而非中心）
✅ 合理管理 canvas 状态（save()/restore()），防止插件间样式污染
✅ 推荐实现代码（兼容 Chart.js v2.x）
Chart.pluginService.register({
beforeDraw: function(chart) {
const { width, height } = chart.chart;
const ctx = chart.chart.ctx;
// 恢复上下文状态（确保不受之前操作影响）
ctx.restore();
// 动态设置字体大小（按高度比例缩放，保证清晰可读）
const fontSize = (height / 114).toFixed(2);
ctx.font = `${fontSize}em sans-serif`;
ctx.textAlign = 'center'; // 关键：水平居中对齐（替代手动计算 textX）
ctx.textBaseline = 'middle'; // 关键：垂直居中对齐（y 指向文本中线）
// 绘制背景圆环（可选装饰）
ctx.beginPath();
ctx.arc(width / 2, height / 2, 55, 0, 2 * Math.PI);
ctx.fillStyle = '#006072';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#CBE1EF';
ctx.stroke();
// 构建动态文本
const text = `$${Math.round(round_number / Math.pow(10, zeroCount))}M+`;
// 直接以画布中心为锚点绘制 —— 简洁且绝对居中
ctx.fillStyle = 'white';
ctx.fillText(text, width / 2, height / 2);
// 保存当前状态供后续插件使用
ctx.save();
}
});
? 关键要点说明
-
textAlign = 'center'+textBaseline = 'middle'是居中的黄金组合：前者使fillText(x, y)的 x 对应文本水平中心，后者使 y 对应文本垂直中心（基线中点），二者结合即可用(width/2, height/2)精准定位。 -
避免手动
measureText计算textX：除非需特殊对齐（如左对齐后偏移），否则textAlign更健壮、更易维护。 -
fontSize动态化：height / 114是经验比例（适用于常见尺寸），你可根据实际效果微调分母（如 100–130 范围内测试）。 -
变量作用域注意：
round_number和zeroCount需在插件外部定义或从chart.config中提取，确保运行时可访问。
⚠️ 常见误区提醒
- ❌ 错误地在
fillText前调用ctx.save()：应在其后保存，否则可能覆盖其他插件状态。 - ❌ 使用
height / 1.9或height * 0.55等硬编码值：无法适配不同字号的基线偏移，视觉上永远“略偏上”。 - ❌ 忽略
ctx.restore()位置：应在绘图逻辑起始处调用，确保上下文干净。
通过以上方案，无论桌面端、平板还是移动端，文本都将稳定、精确地锚定于 Doughnut 图形正中心，真正实现响应式完美居中。
