JavaScript绘制图表主要采用Canvas和SVG。Canvas适合高性能、大量数据绘制，如动态柱状图；SVG则因支持DOM操作和事件交互，更适合可缩放、需用户交互的折线图等场景。
JavaScript 实现图表绘制主要依赖两种技术：Canvas 和 SVG。它们各有特点，适用于不同场景。下面详细介绍如何使用 JavaScript 结合 Canvas 或 SVG 来绘制常见图表，如柱状图、折线图等。
使用 Canvas 绘制图表
Canvas 是 HTML5 提供的位图画布，通过 JavaScript 操作绘图上下文（context）来绘制图形。它适合绘制大量数据点，性能较高，但不保留图形对象信息。
基本步骤：
- 在 HTML 中创建
- 用 JavaScript 获取 canvas 上下文（2d context）
- 使用 context 的绘图方法绘制图形
示例：绘制简单柱状图
Canvas 优势在于绘制效率高，适合动态更新和动画效果，但缺点是每个图形不是独立 DOM 节点，难以绑定事件或单独操作某根柱子。
使用 SVG 绘制图表
SVG（可缩放矢量图形）基于 XML 标签，每个图形元素都是独立的 DOM 节点，支持事件监听、CSS 样式和响应式缩放，适合需要交互的图表。
基本结构：
- 在 HTML 中插入 svg> 标签，定义宽度和高度
- 使用 JavaScript 动态创建图形元素（如
, , ）并添加到 SVG 中
示例：用 SVG 绘制折线图
SVG 更适合需要交互、缩放或长期维护的图表项目。每个元素可绑定事件，便于实现点击、悬停等行为。
选择 Canvas 还是 SVG？
根据实际需求决定：
- 数据量大、频繁重绘（如实时监控）→ 推荐 Canvas
- 需要交互、可访问性、响应式设计 → 推荐 SVG
- 追求开发效率 → 可考虑 D3.js、Chart.js 等库
原生 JS 配合 Canvas 或 SVG 能完全控制图表细节，适合定制化需求强的项目。掌握这两种方式，就能灵活应对大多数前端图表开发任务。
基本上就这些。理解绘图原理后，扩展成饼图、面积图也不复杂，关键是把数据映射到坐标和图形属性上。
