Canvas绘制统计图表文字标注的关键是精准定位、合理对齐、防重叠、自适应换行及动态跟随；需基于几何计算确定锚点坐标，统一textBaseline与textAlign，用measureText实现智能换行，并将文字属性内聚于数据结构中。
文字定位必须基于图形几何中心
饼图每块扇形的文字不能硬写在固定坐标，得从圆心出发，按该扇形起止角度算出中点角，再沿该方向延伸一段距离（通常为半径的 60%–80%），作为文字锚点。例如：
- 扇形起始角 α，终止角 β → 中心角 θ = (α + β) / 2
- 文字 x = centerX + cos(θ) × radius × 0.7
- 文字 y = centerY + sin(θ) × radius × 0.7
- 注意：Canvas 的三角函数用弧度，角度需转
Math.PI / 180
文字对齐与基线决定可读性
默认 textBaseline = 'alphabetic' 会让中文底部“悬空”，建议统一设为 'middle' 或 'ideographic'；水平对齐则配合位置动态调整：
- 居中显示文字 →
ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; - 若文字贴边（如柱状图顶部）→
textAlign = 'center'; textBaseline = 'bottom'; - 避免重叠：检测相邻扇形夹角过小（如 < 25°）时，改用引导线+外部标签
自动换行与宽度限制提升适应性
长文本（如“用户活跃度占比（含夜间时段）”）直接写进小扇形会溢出。应利用 measureText() 动态拆分：
- 先测整段宽度：
const w = ctx.measureText(text).width; - 若超限（如 > 扇形弦长 × 0.6），按空格/标点切分单词，逐行绘制
- 每行 y 坐标递增
lineHeight（推荐 1.3 × font-size） - 超出可视区则截断并加 “…”（需手动判断，Canvas 不自带省略）
标注跟随图形移动需绑定数据结构
文字不是独立图元，而是图形的附属属性。推荐将标注信息内聚进数据项：
- 每个数据项包含
{ value, label, x, y, angle, fontSize } - 重绘前重新计算所有
x/y，确保缩放、平移、旋转后仍准确 - 鼠标 hover 高亮某块时，同步放大其文字字号并加阴影，强化关联感
- 删除图形时，连同其绑定的文字一并从渲染队列中移除
