canvas图表需联动数据映射、坐标管理和交互响应：图例须手动绘制并动态绑定数据状态；缩放应通过zoomlevel/panoffset重映射坐标而非ctx.scale()；交互需精准反向映射实现锚点缩放与拖拽平移；重绘必须清空→重算→重画，确保图例置顶且状态显式设置。
Canvas 图表要带图例和缩放，核心不是加个按钮就行，而是得把数据映射、坐标管理、交互响应三块逻辑串起来。图例不是装饰，它得和数据状态联动；缩放也不是简单调 ctx.scale()，否则坐标错乱、图例偏移、点击定位全失效。
图例：手动绘制 + 动态绑定数据
Canvas 没有内置图例组件，必须自己画矩形色块 + 文字，并确保它随图表更新同步刷新。
- 预留图例区域（比如画布底部或右侧），计算可用宽度/高度时提前扣除该区域
- 每个图例项用 ctx.fillRect() 绘制小色块，再用 ctx.fillText() 写文字，颜色和文字内容严格对应数据系列（如 dataSeries[0].color 和 dataSeries[0].label）
- 图例点击响应需手动实现：监听 canvas 的 click 事件，判断鼠标是否落在某段图例区域内（用 clientX/Y 换算为相对 canvas 坐标，再比对预存的图例矩形范围）
- 点击后可切换对应数据系列的显示状态（比如设 hidden = true），重绘时跳过该系列，并更新图例文字样式（如加删除线或变灰）
缩放：避免直接 ctx.scale()，改用坐标重映射
直接调 ctx.scale() 会让所有后续绘制（包括图例、坐标轴、文字）一起缩放，导致图例位置漂移、字体糊掉、点击坐标失准。正确做法是保持 canvas 像素尺寸不变，只改变数据到像素的映射关系。
- 维护 zoomLevel 和 panOffset 两个变量，代表当前缩放倍数和平移偏移
- 所有数据点绘制前，先做坐标转换：xPixel = (dataX - minX) * xScale * zoomLevel + offsetX + panOffset.x
- y 坐标同理，但注意 Canvas Y 轴倒置，需额外翻转：yPixel = canvas.height - margin.bottom - (dataY - minY) * yScale * zoomLevel + panOffset.y
- 图例、坐标轴文字等 UI 元素不参与缩放，固定绘制在 canvas 像素坐标上（比如总放在 canvas.width - 120, 20）
交互控制：拖拽平移 + 鼠标滚轮缩放
缩放体验好不好，关键在坐标反向映射是否精准——用户滚轮时，要以鼠标指针为中心缩放，而不是以画布左上角。
- 监听 mousewheel 事件，用 event.deltaY 判断缩放方向，动态调整 zoomLevel
- 获取鼠标相对于 canvas 的位置（通过 getBoundingClientRect()），换算成逻辑坐标（即“此刻鼠标正指着哪条数据”）
- 缩放后，调整 panOffset，使该逻辑坐标在 canvas 上的位置保持不变（即视觉锚点不动）
- 拖拽用 mousedown → mousemove → mouseup 实现：记录起始 offset，mousemove 时实时更新 panOffset，重绘整个图表
重绘机制：清空→重算→重画，一步不能少
每次缩放、平移、图例切换，都必须完整重绘，且顺序不能错。
- 开头必调 ctx.clearRect(0, 0, canvas.width, canvas.height)，只清全画布更稳妥
- 重新计算当前视口下的数据范围（minX/maxX/minY/maxY），用于生成新坐标缩放因子
- 先画坐标轴、网格线、数据图形，再画图例和文字标签——保证图例永远在最上层
- 所有 ctx.fillStyle、ctx.font、ctx.lineWidth 等状态，都在使用前显式设置，不依赖上次残留值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
