纯HTML Canvas实现轻量图表插件：替代ECharts的轻量化方案

简介这是一份基于原生HTML、JS、CSS的统计图表插件借助第三方Charts图表库在线生成折线图、柱状图与饼图并支持在折线图和柱状图之间灵活切换。资源面向需要快速实现数据可视化的前端开发者或相关课程学习者无需复杂框架即可上手同时该模块可兼容放入Vue项目中使用方便集成到既有系统。包体仅含1个HTML文件压缩包大小约3KB结构紧凑打开即可查看完整图表实现逻辑。目前已有831人学习下载。代码通过纯JS组装数据并设置到图表模型用户只需在页面表格内填写数据刷新后即可自动生成图表表格还支持动态增加行列、扩充tr、td标签便于按需维护数据项。借助该文件读者既能直接获得可运行的图表示例也能学习到原生JS与Charts库的整合思路、表格数据到图表的映射方法以及图表模块在Vue项目中的兼容写法适合用于日常开发参考、课程作业或项目原型演示。1. 先说清楚我为什么放着 ECharts 不用偏要自己写这套纯 HTML 图表插件做过前端可视化的人基本都被问过一个问题“就三个图表有必要引 ECharts 吗”大部分时候答案是没有必要。我之前在一个内部数据看板项目里就遇到这种情况需求方只要一个折线图看趋势、一个柱状图看对比、一个饼图看占比数据量不大也没有交互钻取的需求。如果按老思路直接上 ECharts单文件压缩后 400KB 起步再加上它那套主题、动画、组件注册机制对一个小工具页来说完全是杀鸡用牛刀。更麻烦的是那套系统运行在一个完全离线的内网环境没有 CDN 资源npm 私服也不完善下载一个依赖包要层层审批。说白了我就想要一个能塞进单 HTML 文件、打开就能出图的轻量方案。我尝试了 Chart.js 和 ECharts 的按需引入但内部评审对第三方库的原生代码审计工作量很敏感。于是干脆自己写了一个只包含折线图、柱状图、饼图三种基础图表的“纯 HTML 原生 Canvas”插件整个脚本压缩前只有大约 13KB打开页面两秒出图完全离线可用。这个插件解决的问题很明确在没有前端工程化环境、不能引外部库、或者不想为几个基础图表付出几百 KB 成本时用纯 HTML/JavaScript 就能完成数据可视化。适合三类人参考刚学完 JavaScript 想巩固 Canvas 作图原理的前端新人在受限网络环境下做后台系统的工程师以及觉得 ECharts 太重、想了解轻量图库底层实现的好奇者。整套代码的核心思路是用一个全局配置对象定义图表类型和数据集插件负责把数据映射成 Canvas 上的像素坐标最后渲染出坐标轴、数据系列和图例。下面我把从设计到落地的完整过程拆开讲包括我怎么定 API、怎么处理坐标轴刻度、怎么在 Canvas 上画三种图形以及调试过程中踩过的坑。2. 插件整体设计思路与模块划分2.1 怎么定 API 才能让三种图表用一个入口设计之前我先明确了使用场景调用者不懂 Canvas 也没关系他只关心“给我一个容器传数据出图表”。所以我把 API 收敛成一个函数格式仿照主流图表的配置式写法但做了大幅简化。const config { el: #chart1, // 容器选择器 type: line, // line | bar | pie title: 访问量趋势, width: 600, height: 320, data: { labels: [周一, 周二, 周三, 周四, 周五, 周六, 周日], datasets: [{ name: PC端, values: [120, 200, 150, 80, 170, 210, 190], color: #409EFF }, { name: 移动端, values: [90, 140, 180, 120, 110, 160, 200], color: #67C23A }] } }; renderChart(config);调用方只需要把 “labels values” 准备好剩下的坐标轴、网格线、图例都是插件内部自动计算。这样设计的好处是屏蔽了 Canvas 的复杂度也方便以后扩展新图表类型——只要在 renderChart 里加一个分支判断就行。2.2 为什么选择 Canvas 而不是 SVG画统计图这件事SVG 和 Canvas 都做得到。SVG 用 DOM 节点描述图形对单个元素的点击事件支持更自然Canvas 则是位图绘制事件需要自己计算坐标。为什么我选择 Canvas因为折线图和柱状图的数据量通常不大Canvas 完全扛得住而且 Canvas 在处理大量坐标点比如上千个点时性能比 SVG 稳定得多。我验收的时候测试过 5000 个数据点的折线SVG 会明显卡顿Canvas 毫秒级完成。再一个原因是代码组织更简洁。一个 canvas.getContext(2d) 拿到画笔对象折线、柱体、扇形都用同一套 fill/stroke 逻辑不需要维护不同 SVG 标签的属性体系。缺点是我必须在代码里自己处理点击命中检测——比如判断鼠标点击的位置落在哪个柱子上但这在纯前端图表库里完全可控。2.3 模块功能切分我把实现拆成五个内部函数职责非常单一initCanvas负责获取 canvas 元素适配容器宽度处理高分屏模糊问题computeAxis输入数据最大值、最小值计算坐标轴的刻度范围和刻度步长drawGridAndAxis绘制网格线、坐标轴文字、刻度线drawDataset按图表类型分派绘制逻辑line / bar / piedrawLegend和drawTooltip处理图例和悬浮提示这么拆的好处是调试定位问题很快。比如发现饼图的文字重叠不需要在折线图代码里排查坐标轴刻度不整齐直接改 computeAxis 就行。模块间通过一个内部状态对象共享上下文避免全局变量污染。3. 核心细节解析坐标轴计算、Canvas 绘制的技术要点3.1 坐标轴刻度算法最容易被忽视的一步坐标轴刻度是整个图表里最容易出 bug 的部分。如果直接把数据最大值当作坐标轴最大值柱状图的柱子会顶到图表的顶部不美观如果最大值是 197坐标轴标签显示“197”这种不整的数字也很难看。我采用的是一种常见的“取整数刻度”办法function niceScale(maxValue, tickCount) { const rawStep maxValue / tickCount; const mag Math.floor(Math.log10(rawStep)); const normalized rawStep / Math.pow(10, mag); let niceStep; if (normalized 1.5) niceStep 1; else if (normalized 3) niceStep 2; else if (normalized 7) niceStep 5; else niceStep 10; niceStep * Math.pow(10, mag); const niceMax Math.ceil(maxValue / niceStep) * niceStep; return { max: niceMax, step: niceStep }; }rawStep 先算出粗略步长然后根据它在哪几个档次之间选出 1、2、5 或 10 作为步长基数再乘上 10 的幂次。这样不管数据是 197 还是 26300都能得到一个“看着舒服”的刻度区间和步长。坐标轴的刻度数量我控制在 5 到 6 个太少会显得粗糙太多标签会重叠。3.2 高分屏模糊问题的处理Canvas 在普通屏幕上是清晰的但在 2 倍甚至 3 倍 Retina 屏上会模糊。原因是 Canvas 画布的物理像素和 CSS 像素不一致默认情况下浏览器会把一张小图画拉伸到大尺寸显示自然发虚。解决办法是手动把 canvas 的像素尺寸设置为 CSS 尺寸乘以 devicePixelRatio然后用 scale(dpr, dpr) 缩放画布坐标系function initCanvas(el, width, height) { const canvas document.createElement(canvas); const dpr window.devicePixelRatio || 1; canvas.style.width width px; canvas.style.height height px; canvas.width width * dpr; canvas.height height * dpr; const ctx canvas.getContext(2d); ctx.scale(dpr, dpr); return { canvas, ctx }; }这个细节看起来小但对于图表这种细线居多的场景特别关键。没处理之前折线在 MacBook 上的显示像蒙了一层纱处理完之后线条锐利清晰度直接提升一个档次。3.3 数据到像素坐标的映射公式只要是统计图核心都是把一个“数据值”映射到 canvas 上的一个“像素坐标”。折线图和柱状图实际上共用这一套映射逻辑function getX(index, total) { return padding.left (index / (total - 1)) * plotWidth; } function getY(value, min, max) { const ratio (value - min) / (max - min); return padding.top (1 - ratio) * plotHeight; }getX 是均匀分布在绘图区宽度上getY 做了归一化把数据范围 [min, max] 映射到 [padding.top, padding.top plotHeight]。这里的关键是要区分清楚哪个方向数值增大——Canvas 的 y 轴向下为正向所以需要 (1 - ratio) 来翻转否则数据画出来是倒的。我刚开始就犯过这个错误柱状图的高度算成负数图形直接跑到画布外面去了。4. 实操过程三种图表的绘制实现4.1 折线图折线、数据点、渐变填充的绘制细节折线图的绘制流程是先画网格和坐标轴再遍历第一个 dataset把每个 points 计算出来然后画连续线段。具体实现中我先收集所有数据点的坐标再统一用 beginPath 画线避免分段绘制造成的节点处凸起或断线。function drawLine(ctx, points) { ctx.beginPath(); points.forEach((p, i) { if (i 0) { ctx.moveTo(p.x, p.y); } else { ctx.lineTo(p.x, p.y); } }); ctx.strokeStyle #409EFF; ctx.lineWidth 2; ctx.stroke(); }除了画线我还在每个数据点位置画一个小圆点方便用户精准定位某个时刻的值。再往下比较好看的做法是给折线下方加一层浅色渐变填充——用渐变对象 createLinearGradient 控制透明度从 0.3 降到 0视觉上更现代代码也不复杂。不过这个渐变实际开发中有一个注意点必须紧跟折线路径重新 beginPath 然后 closePath 到图表底部否则填充区域会封不住。4.2 柱状图分组柱子的定位与宽度计算柱状图相比之下复杂一点尤其是多组数据时的并排柱子。我需要处理两个问题每根柱子的宽度以及柱子之间的间隙。假设有 n 组数据绘图区的柱子总宽度 groupWidth 按整个区间的 60% 计算每根柱子宽度为 groupWidth / n 再乘一个 0.8 的系数留出内部间距剩下的 40% 留作组间距。每根柱子的 x 起点这样计算const groupWidth plotWidth / totalGroups * 0.6; const groupX padding.left (index / totalGroups) * plotWidth (plotWidth / totalGroups - groupWidth) / 2; const barWidth groupWidth / datasetCount * 0.8; points.forEach((value, di) { const barX groupX di * (barWidth gap); const barY getY(value, min, max); const barHeight padding.top plotHeight - barY; ctx.rect(barX, barY, barWidth, barHeight); });柱高计算公式我单独提一下因为这是一个常见的出 bug 点barHeight 并不是直接用 value 换算成像素而是“坐标轴底部到数据点的垂直距离”即 padding.top plotHeight - barY。如果不这么算柱子位置完全错乱。4.3 饼图扇形路径、百分比标签与引导线饼图的实现逻辑是角度制转换为弧度从 12 点方向开始顺时针累计。每块扇形的起点角度是上一块的结束角度终点角度为 startAngle (value / total) * 2 * Math.PI。饼图最难的是标签布局。当某块占比接近 100% 时其余碎片的标签会全挤在一小块区域里叠成一团。我在代码里加了一个自适应逻辑如果两块相邻扇形的标签之间角度差小于 15 度就把标签文字位置沿法线方向外推避免重叠。引导线用折线从扇区边缘连接到标签文字颜色跟随扇区颜色视觉上比单纯的居中文字清晰很多。我还给扇形加了 hover 高亮在 mousemove 事件里计算鼠标相对圆心的角度判断落在哪个扇区范围然后重新绘制该扇区偏移中心点 4 像素呈现“弹出”效果。这就是我前面说的 Canvas 命中检测实现方式是判断角度区间和距离半径。4.4 图例和悬浮提示的补充实现图例的实现相对简单画一个小色块加文字。关键一点是图例的位置要避让绘图区我统一放在标题下面的右侧用 measureText 测量文字宽度后动态换行。悬浮提示我用一个绝对定位的 div 实现mousemove 时在鼠标附近显示 values 数据移出图表时隐藏。这个提示框必须设置 pointer-events: none否则鼠标移到提示框上会触发移出事件导致提示框闪烁这是我调了好一会才发现的坑。5. 常见问题与排查技巧实录现象原因解决方案折线倒过来显示最大值出现在下方Y 坐标映射时忘记把 Y 轴方向翻转使用 (1 - ratio) 的方式计算 getYRetina 屏下图表模糊未处理 devicePixelRatiocanvas.width 乘 dprctx.scale(dpr, dpr)柱状图柱子宽度不一致groupWidth 计算时没有留出组间距每组宽度乘以 0.6 系数并均匀居中饼图标签文字重叠小扇区角度差太小相邻标签角度差小于 15 度时外推柱状图高度是负数barHeight getY 的结果而不是底部减 getY用 padding.top plotHeight - barY图表在浏览器窗口缩放后错位使用的是初始化时的固定宽度用容器 clientWidth 动态计算并重绘我再补充几个调试技巧。第一绘制过程中用 ctx.globalAlpha 0.2 临时半透明填充可以快速看清重叠的图形区域。第二在 getY 这种关键函数里用 console.log 打印中间值虽然原始但非常有效。第三Canvas 的 save/restore 非常好用每画完一个图形就 restore 一次避免线宽、填充色这些状态互相污染。还有个小坑是关于 x 轴的文字显示。柱状图有 7 个分类标签每个标签文字宽度大约 40 像素绘图区只有 500 像素左右如果不加处理会互相重叠。我先用 measureText 测量所有标签总宽度如果超了就每两个标签之间跳过一个显示或者把字体缩小一档实在不行就让文字旋转 45 度。折线图因为点之间间距大一般不会遇到这个问题。6. 一套更优雅的扩展方向让插件从“够用”走向“好用”写到这里主体功能已经完整了。但如果你和我一样是那种“做完了还想再打磨一下”的性格下面这几个方向可以考虑扩展。加一个 area 模式也就是面积图在折线的基础上把填充透明度调高数据对比会更直观加一个 y 轴的单位说明在坐标轴上方显示 “单位人” 这种统一标识再有就是对动态数据流的支持——每隔几秒拿到新数据调用 renderChart 重绘就能组成一个简易实时监控面板。在性能层面也有优化空间。现在我的实现是每次重绘全量执行对动画过渡没有做插值计算。如果要加柱状图从底部升起的动画可以用 requestAnimationFrame 在每一帧更新一个 0 到 1 的进度参数让 barHeight 乘以这个进度整个图表就有生长动画了。代码改动量不大视觉效果却提升很明显。另外如果你要在 React 或者 Vue 里用这个插件功能上没有障碍。它在 Vue 的 mounted 生命周期里调用 renderChart 就行卸载时注意销毁事件监听器。React 18 的 StrictMode 下组件会执行两次挂载只需要在 useEffect 清理函数里把 canvas 清空并移除 tooltip 节点其他逻辑不需要改动。我个人在实际使用中的一个偏好是把这个插件保存成一个无副作用的独立 JS 文件不向 window 挂任何全局变量只在文件末尾导出一个 renderChart 接口。这样无论是在原生 HTML 里 script 引用还是通过 ES Module 导入都能即插即用。最近一个内部报表项目里我又加了横向柱状图排行功能和折线柱状混合图顺着这套配置式的数据结构和 Canvas 绘制思路大概半个多小时就能完成一种新型图表的接入。如果你也在纯 HTML 页面上需要快速出几张统计图又不想为一个简单需求背负几百 KB 的库那这套思路值得你抄一版去试。踩过几次坐标轴和 Canvas 模糊的坑之后你对浏览器绘图底层的理解会比只会配置 ECharts option 的人深不少。本文还有配套的精品资源点击获取