Canvas与SVG图表绘制教程详解

本文深入浅出地讲解了如何用原生 JavaScript 实现轻量级图表库的核心逻辑，聚焦于 Canvas 与 SVG 两大绘图技术的本质差异与适用场景：Canvas 以高性能、命令式绘制见长，适合实时更新的动态图表，但需手动处理坐标映射、重绘和像素对齐；SVG 则凭借矢量特性、DOM 可访问性与天然交互支持，成为语义化强、需缩放或用户操作的静态/中低频图表的理想选择。文章不仅剖析了二者在坐标系、渲染机制、响应式处理和事件绑定上的关键实践要点，还通过极简柱状图示例直观展示了数据到图形的抽象过程，强调“理解底层原理比套用框架更重要”——掌握这些基础，你就能灵活定制、高效调试，快速构建真正贴合业务需求的可视化方案。

用 JavaScript 实现一个轻量图表库，核心在于抽象数据映射逻辑 + 图形渲染能力。Canvas 和 SVG 各有适用场景：Canvas 适合高频重绘（如实时折线图、动画），SVG 更适合交互丰富、需缩放/语义化/可访问性的静态或中低频图表（如柱状图、饼图）。不需要从零造轮子，但理解底层原理能帮你灵活定制或调试。

用 Canvas 绘制基础图表的关键步骤

Canvas 是位图绘制，靠 getContext('2d') 获取绘图上下文，所有图形都通过命令式 API 画上去：

• 先设置画布尺寸（canvas.width/height，不是 CSS 样式），否则会模糊或拉伸
• 用 beginPath() → 绘图命令（moveTo, lineTo, arc 等）→ stroke() 或 fill() 完成单个图形
• 坐标原点在左上角，X 向右，Y 向下；需手动做「数据值 → 像素坐标」的线性映射（例如：pixelY = height - (value - min) / (max - min) * height）
• 文字用 fillText()，注意 textAlign 和 textBaseline 对齐方式，否则标签容易错位
• 清空重绘用 clearRect(0, 0, width, height)，不要依赖 canvas.width = canvas.width（会重置所有上下文状态）

用 SVG 构建可交互图表的优势与写法

SVG 是基于 XML 的矢量标记语言，每个图形都是 DOM 节点，天然支持事件、CSS 样式、缩放和无障碍属性：

• 直接用 JS 创建元素：document.createElementNS('http://www.w3.org/2000/svg', 'line')，设置 x1/y1 等属性即可
• 数据绑定推荐用 dataset 属性（如 el.dataset.value = "42"），方便后续交互取值
• 响应式处理：用 viewBox（如 viewBox="0 0 600 400"）替代固定宽高，配合 CSS 宽度实现等比缩放
• 交互增强：给 加 cursor: pointer 和 addEventListener('click', ...) 即可响应点击；用