JavaScript图表库实现指南：Canvas与SVG绘图详解

本文深入解析了如何用原生 JavaScript 构建轻量级图表库的核心逻辑，聚焦于 Canvas 与 SVG 两大绘图技术的本质差异与适用场景：Canvas 以高性能、命令式绘制见长，适合实时更新的动态图表，但需手动处理坐标映射、重绘和像素对齐；SVG 则凭借矢量特性、DOM 可访问性及天然事件支持，成为交互复杂、需缩放、语义化和无障碍能力的静态或中低频图表的理想选择。文章通过清晰的步骤演示、关键代码要点（如 Canvas 的 clearRect 正确用法、SVG 的 viewBox 响应式设计）以及双版本柱状图实现示例，揭示了“数据映射→图形渲染”这一主线，并强调理解底层原理比盲目封装更重要——它赋予开发者精准定制、高效调试和灵活演进的能力，让自研图表不再遥不可及。

用 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', ...) 即可响应点击；用