JavaScript轻量图表库核心是数据映射+图形渲染：Canvas适合高频重绘（如实时折线图），需手动坐标转换和clearRect重绘；SVG适合交互丰富图表，基于DOM节点，支持事件、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 宽度实现等比缩放 - 交互增强：给
<rect></rect>加cursor: pointer和addEventListener('click', ...)即可响应点击；用<title></title>子元素提供 tooltip 文字（悬停显示） - 避免内联样式，用 class + CSS 控制颜色、过渡动画（如
transition: fill 0.2s）
封装一个极简柱状图函数（Canvas + SVG 双版本示意）
不追求功能完整，只体现核心抽象：输入数据数组，输出可视化结果。
立即学习“Java免费学习笔记（深入）”；
-
Canvas 版：接收
ctx,data,opts = {x:0,y:0,width:300,height:200,padding:20}，内部算柱宽、映射高度、循环绘制fillRect -
SVG 版：返回一个
<g></g>元素，内部按数据生成多个<rect></rect>，设置y和height（注意 SVG y 轴向下，柱子要从顶部往下画，即y = opts.y，height = valueScale * value） - 共用逻辑可抽成工具函数：比如
scale(data, outputMin, outputMax)返回值域映射器，autoTicks(min, max, count=5)生成坐标轴刻度
基本上就这些。真正实用的图表库还会处理坐标轴、图例、动画缓动、移动端适配、导出 PNG/SVG 等，但起步时聚焦「数据 → 图形」这一条主线，Canvas 练手感，SVG 练结构，很快就能搭出可用的定制图表。
