Canvas交互式图表核心在于四步逻辑：数据映射坐标、坐标转像素、分层绘制、事件绑定；映射需预留边距并封装变量；分层含网格、轴、图形、标签；交互靠坐标换算与包围盒检测；更新依赖全量重绘而非增量修改。
Canvas 绘制交互式图表，核心不在画得多炫，而在于逻辑是否清晰、可维护、可响应。柱状图和折线图看似表现形式不同，底层绘制逻辑却高度一致：数据映射坐标 → 坐标转画布像素 → 分层绘制（网格/轴/图形/标签）→ 事件绑定触发反馈。只要理清这四步，交互就自然成立。
数据到坐标的映射是起点
原始数据（如 [120, 200, 150, 280]）本身没有位置信息，必须统一映射到画布坐标系。关键不是“怎么算”，而是“怎么设计映射规则”：
- 预留边距（padding），比如左右各 40px、上下各 30px，确保标签不被裁切
- X 轴按数据项等分：第 i 项横坐标 = 左边距 + i × 单位宽度，单位宽度 = (画布宽 − 左右边距) ÷ 数据长度
- Y 轴按数值比例缩放：最大值对应上边距，最小值对应下边距；某值 y 对应纵坐标 = 下边距 − (y − min) × 可视高度 ÷ (max − min)
- 所有计算用变量封装（如
chartWidth,chartHeight,scaleY），避免魔法数字
分层绘制让结构可控
把一张图拆成独立图层，每层职责明确，修改互不影响：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 网格层：用浅灰虚线画横纵网格，辅助读数；只依赖宽高和步长，与数据无关
- 坐标轴层：实线绘制 X/Y 轴，加箭头和文字标注（如 “月份”、“销售额”）
-
图形层：柱状图用
fillRect，折线图用moveTo+lineTo+stroke；颜色、粗细、圆角等样式从数据项中读取 - 标签层：X 轴标签居中对齐，Y 轴标签右对齐；数值标签放在柱顶或折点上方，注意边界检测防止溢出
交互逻辑围绕“点中谁”展开
Canvas 本身不提供 DOM 事件冒泡，所以交互要靠坐标换算实现：
- 监听
click或mousemove，获取事件相对于 canvas 的offsetX/offsetY - 将屏幕坐标反向还原为数据坐标：先减去 padding，再按 scaleX/scaleY 换算回原始值域
- 判断点击落在哪个柱子/折点范围内（柱子用矩形包围盒，折点用半径 6px 圆形区域）
- 命中后触发回调，比如高亮当前项、弹出 Tooltip、跳转详情页——这些行为与绘图逻辑完全解耦
动态更新靠重绘不靠增量
不要试图在原图上“擦掉一根柱子再画一根”，而是每次数据变更都执行完整重绘流程：
- 调用
ctx.clearRect(0, 0, width, height)清空整个画布 - 重新走一遍“映射 → 绘制网格 → 绘制轴 → 绘制图形 → 绘制标签”流程
- 若需动画效果（如柱子从 0 上升），用
requestAnimationFrame控制帧率，在每一帧中按比例绘制当前高度，而非操作 DOM - 配合防抖处理高频数据流（如每秒 10 次更新，只取最新一次重绘）
不复杂但容易忽略。
