flotr2.min.js离线使用：轻量Canvas图表库的最小实现与避坑指南

简介Flotr2 是一个轻量级、功能丰富的 JavaScript 图表库这份压缩包集成了其生产环境专用的 flotr2.min.js 核心文件同时提供一份可直接运行的 HTML 示例页面和一份文本说明内含官方 Demo 地址面向需要在网页中快速绘制折线图、柱状图、饼图、散点图等图形的开发者与学习者。整个资源包共 3 个文件js 文件负责图表库的核心绘图逻辑html 示例展示从引入库到配置图表选项的完整调用流程txt 文档则给出官方在线 Demo 的入口压缩后约 33KB轻巧易部署。用户拿到后可直接打开示例页查看效果并结合官方 Demo 链接理解图表类型切换、坐标轴设置、图例配置、事件交互等关键用法省去从零查阅文档的耗时。目前已有 353 人浏览学习适合希望借助精简代码快速上手 Flotr2、构建数据可视化界面或报表展示的前端开发者参考使用。1. 当你需要 flotr2.min.js一个老牌 Canvas 绘图库的离线引入与最小可用例子如果你的搜索结果里出现了 flotr2.min.js 这个词多半是碰上了老项目维护、离线内网部署或是从某个开源系统里翻出了这个文件却不知道怎么用。它是 Flotr2 这个 JavaScript 图表库的压缩版本。Flotr2 是一个基于 Canvas 的纯前端绘图库不依赖 jQuery 以外的任何重量级框架压缩后的代码体积很小单个文件就能在浏览器环境里画出折线图、柱状图、饼图等常用图形。在引入 Vue、React 之前的老系统或者是完全断网的工控环境里这种一个文件拖进去就能跑的能力到今天依然有实际价值。这篇文章要解决的诉求很直接这个文件到底是干什么的、怎么把它用起来、最简单的例子长什么样、以及那些不写代码就发现不了的坑。我按自己接过几次老项目维护的实操顺序来写目标是你看完就能把 flotr2 塞进一个 HTML 页面里画出第一张图并且知道后续调参去哪里查、报错往哪个方向排查。2. 认清 flotr2.min.js 的本质它是什么包、为什么还能用2.1 从 Flotr 到 Flotr2这包的历史与现状Flotr2 是 Flotr 的继承者作者是 Bas Wenneker。Flotr 是早期基于 Prototype.js 的绘图库后来重写为不依赖 Prototype 的 Flotr2改为依赖可选的 jQuery实际上不传 jQuery 也能跑。它绘制图形的方式是把数据点画到 Canvas 画布上而不是生成 DOM 节点或 SVG 元素。这个设计决策带来了一个直接结果同样一份数据Flotr2 渲染的性能开销比操作 DOM 的方式小特别适合上千个数据点的折线图滚动刷新。为什么今天还会碰到 flotr2.min.js常见场景有三个。一是老系统升级前端代码还是十年前写的里面引用的图表库就是 Flotr2你不能把整块逻辑推倒重来就得继续用。二是内网部署环境开发机和外网隔离npm 装不了包CDN 也连不上手里只有现成的 flotr2.min.js 文件那就拿它干活。三是一些轻量页面只需要画一条趋势线犯不上为了一个图引入几百 KB 的 echarts 或 Chart.jsFlotr2 压缩后大约 40 多 KB性价比够好。要注意的是Flotr2 官方已经停止维护很多年了GitHub 上的最后活跃期大概在 2013 年左右。这意味着它不会有新功能也不会修新浏览器里暴露的兼容性问题。但这不等于它不能用Canvas 基础 API 十年间几乎没有破坏性变化Flotr2 到今天在主流浏览器里依然能正常工作。判断标准不是你用不用老库而是你的需求边界有没有超出它的能力范围——后面会详细说它的边界在哪。2.2 包里的文件结构和引入方式拿到一个 flotr2.min.js它就这么孤零零一个文件。没有 CSS没有依赖其他 JS 文件jQuery 可选没有字体资源。这和很多现代前端包不一样现代包拆成几十个 chunk这个包就一个文件解决问题。文件内部把整个 Flotr2 命名空间挂到了全局对象 Flotr 上你引入之后直接就能用 Flotr 这个全局变量。引入方式最简单的一种是放在 HTML 的 body 结尾处用传统 script 标签加载!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleFlotr2 最小例子/title style #chart-container { width: 600px; height: 300px; } /style /head body div idchart-container/div script src./flotr2.min.js/script script // 绘图代码写在这里 /script /body /html这段代码的引入逻辑是先让 DOM 结构加载完再用 script 标签加载 flotr2.min.js最后执行我们的绘图代码。这里有个隐性的执行顺序依赖绘图代码用到的 Flotr 全局变量必须已经由上一个 script 定义完毕。如果你把绘图代码放在 head 里并且写成同步执行就会拿到 undefined。所以实际项目里我习惯把 flotr2.min.js 放在绘图代码同一个 script 标签之前并且建议把容器 div 放在前面。有人会问用 AMD 或 CommonJS 规范好不好Flotr2 源码本身对这种模块化支持很弱它默认就是全局变量思路。你可以用 require.js 的 shim 配置把它包一层但说白了对于这种单文件老库传统 script 标签最简单可靠不值得为了模块化给自己添麻烦。2.3 为什么 flotr2 比同时代的 flot 更好落地Flotr2 之前有一个 Flotr当时依赖 Prototype.js。Prototype.js 这个库后来基本绝迹了如果你在老系统里看到 flotr 而非 flotr2意味着你得额外引入一个今天很难找到的 Prototype 版本七八百 KB 的体积还会污染 Array.prototype 之类全局对象和新代码冲突概率极高。Flotr2 把这种依赖彻底甩掉了不传 jQuery 也能独立工作。从实际落地角度这个差异是决定性的。flotr2.min.js 可以零依赖直接开工Flotr2 也不需要你引入它的 CSS 文件。当年很多绘图库要求你配套引入主题 CSS少一个文件样式就乱套。Flotr2 的设计是全部通过 JavaScript 配置项来控制样式颜色、线宽、透明度、坐标轴标签全部放在 options 对象里。这种设计虽然写起来比 CSS 繁琐但好处是单一入口排查问题时只需要盯住一个 Flotr.draw 调用里传进去的 options。还有一点值得说Flotr2 的数据结构非常简单就是一个二维数组每一项代表一个点。没有复杂的 DataSet 概念没有链式调用就是一个纯函数式的 draw 传入数据和配置。越简单的东西越不容易出错这也是我偶尔还在维护老项目时愿意继续用它的原因。3. 跑通第一个图表一个可复制的 flotr2 最小例子3.1 先画一条折线最小可运行代码接下来这段代码就是上面 HTML 页面里缺的绘图部分。我以折线图作为第一个例子因为折线图的配置项最少最容易确认整套链路通了。script // 准备数据一个二维数组每个元素是 [x, y] var data [ [0, 3], [1, 5], [2, 2], [3, 8], [4, 6], [5, 9] ]; // Flotr.draw 是核心绘图函数 // 参数1容器 DOM 元素 // 参数2数据数组可以是多个图例的数组 // 参数3配置对象 Flotr.draw( document.getElementById(chart-container), [data], // 注意外层还有一个数组代表一个或多个数据序列 { title: 最小折线例, xaxis: { min: 0, max: 5 }, yaxis: { min: 0, max: 10 } } ); /script这段代码的逻辑是先定义变量 data 保存坐标点数组然后调用 Flotr.draw 函数。第一个参数是通过 getElementById 拿到的 DOM 容器第二个参数是数据序列的数组之所以外面再套一层是因为 Flotr2 支持在同一张图里画多条线每个内部数组代表一条数据序列后续加第二条线只需要继续往这个外层数组里 push 新数据。第三个参数是配置对象这里仅设置了标题和两个坐标轴的范围。参数说明方面最容易踩坑的是第二参数的层级。如果直接写 Flotr.draw(container, data, options)data 是一个二维数组的序列会被 Flotr2 当成一个二维数组数据点但因为每个点本身就是数组而非数字出来的图会完全不是预期。我的习惯是无论画几条线都用 [data1, data2] 这种嵌套形式。坐标轴 min 和 max 如果不传Flotr2 会默认从数据里推算范围但推算结果往往会在数据点上下留白看起来不紧凑。建议在确定业务边界时显式给定范围省得图出来后视觉效果不对还要返工。3.2 多序列与图例从最小例子走向真实使用单条线只是证明链路通了实际业务中几乎都会面临多条线对比。下面这段代码演示多序列折线图加图例这是我在监控类页面里最常用的形态。// 生成两条正弦曲线数据 var sineData []; var cosineData []; for (var i 0; i 100; i) { sineData.push([i, Math.sin(i * 0.1)]); cosineData.push([i, Math.cos(i * 0.1)]); } Flotr.draw( document.getElementById(chart-container), [ { data: sineData, label: 正弦, lines: { show: true, lineWidth: 2 } }, { data: cosineData, label: 余弦, lines: { show: true, lineWidth: 2 } } ], { legend: { position: ne, backgroundColor: #f5f5f5 } } );这段代码里每个序列不再直接是二维数组而是一个对象包含 data、label、lines 三个字段。data 字段存原来的坐标点数组label 是显示在图例里的文字lines 控制线条样式。这里 lineWidth: 2 能明显让折线更清晰默认值是 1在高分屏上会显得发虚。这种对象结构是 Flotr2 里更通用的写法因为 Flotr2 支持的数据格式不止一种后面的柱状图和饼图也依赖这种按序列配置的方式。第一次写时最容易漏掉的是 lines: { show: true } 这一层如果不显式声明 show 属性Flotr2 默认行为会因为图表类型推断而变来变去显式声明最稳妥。3.3 简单例子到底该贴哪些配置一张参数速查表一个真正称得上“简单例子”的图表配置项不需要很多。根据我这些年用下来的经验下面这些参数是基础中的基础出现频率最高。配置路径可选值示例作用备注title字符串图形顶部标题可以不设默认无标题xaxis.min / xaxis.max数值x 轴显示范围不设会按数据自动推算yaxis.min / yaxis.max数值y 轴显示范围同左lines.showtrue / false折线是否显示折线图必须显式设lines.lineWidth数值折线粗细高分屏建议 2points.showtrue / false数据点是否描点数据点密集时不建议开legend.positionne / se / sw / nw图例方位ne 指右上角grid.color颜色字符串网格线颜色默认灰色mouse.tracktrue / false是否允许鼠标追踪追踪十字线效果mouse.trackFormatter函数自定义追踪提示文本需要自己拼接 HTML这张表里的每项我都在项目里实际改过其中 grid.color 容易被忽略默认的灰色网格在深色背景页面上会完全看不清坐标系需要改成浅色透明。mouse.trackFormatter 是一个函数Flotr2 会把当前追踪点和序列索引传进来你需要返回一个字符串作为 tooltip 内容。这些配置不是看一眼就能记住的但只需要记住 Flotr.draw 的参数结构其他都可以边用边查源码注释。4. 不只折线flotr2 的柱状图、饼图与常用配置参数4.1 柱状图的配置方式与数据要求折线图跑通以后柱状图的配置就是把 lines 换成了 bars。一个值得注意的点是柱状图对数据要求更严格每个数据点的 x 值必须是整数而且最好连续否则柱子的分布会出现明显空白观感极差。var barData [ [0, 30], [1, 85], [2, 52], [3, 94], [4, 71] ]; Flotr.draw( document.getElementById(chart-container), [ { data: barData, label: Q1 销售额, bars: { show: true, barWidth: 0.8, lineWidth: 1 } } ], { xaxis: { min: -0.5, max: 4.5, ticks: [[0, 一月], [1, 二月], [2, 三月], [3, 四月], [4, 五月]] }, yaxis: { min: 0, max: 100 } } );这里 barWidth 控制柱子的宽度占一个刻度区间的比例0.8 表示柱子之间留一点间隙1 就是柱子之间完全无缝。ticks 配置让 x 轴显示业务上的标签文字而不是数字ticks 的格式是数组每一项又是一个两个元素的数组第一个元素是对应的 x 值第二个是该位置显示的文本。这是 Flotr2 中自定义坐标轴文字的标准写法。实际踩过的坑是柱状图数据里如果有 null 值Flotr2 的柱状渲染在某些版本下会直接跳过该位置但不报错导致图表上出现一根柱子凭空消失这个现象排查起来比较费力因为它不是明显报错只是视觉上柱子缺了一根。建议在传给 Flotr2 之前把数据清洗一遍把 null 改成 0 或者把整条数据过滤掉。4.2 饼图的配置方式与比例算法饼图和折线图、柱状图差别在于数据结构。饼图的 data 里每个点的 x 值被忽略y 值代表占比权重Flotr2 内部会把所有 y 值相加按比例计算扇区角度。var pieData [ [0, 45], [0, 25], [0, 20], [0, 10] ]; Flotr.draw( document.getElementById(chart-container), [ { data: pieData, pie: { show: true, explode: 8 } } ], { legend: { position: se, backgroundColor: #ffffff } } );这段代码里 pie.explode 是一个像素偏移量表示某一个扇区从饼图中心向外凸出的距离。这里四块都设置了 explode 值最终效果是整饼散开。如果想只高亮某一块需要单独为该序列配置不同 explode 值这个实现有点绕你得把每一块作为独立序列传进去。关于 pie 图的配色Flotr2 有默认的颜色序列但默认颜色在相邻扇区颜色对比度不够时区分度很差。我知道的一个可行做法是使用 color 数组配置项在 options 里传 colors: [#ff0000, #00ff00, #0000ff]Flotr2 会按序列顺序自动分配。饼图每块扇形内部不显示百分比文字这是 Flotr2 的硬伤之一想要在扇区上标注数值需要借助 mouse.track 的 tooltip 功能或额外画文字层后面会在避坑章节展开。4.3 必调的参数细节坐标轴刻度、网格和鼠标追踪坐标轴自定义刻度和网格样式是几乎每个图表都要面对的配置项。x 轴和 y 轴的配置结构是对称的但实际表现各异x 轴的 ticks 一般和业务时间点相关y 轴的 ticks 更多地用于控制刻度密度防止数字标签互相重叠。Flotr.draw( document.getElementById(chart-container), [data], { xaxis: { mode: time, timeFormat: %Y-%m-%d, noTicks: 6, tickFormatter: function(value) { // 自定义刻度格式化逻辑 return value.toFixed(0); } }, yaxis: { min: 0, max: 100, noTicks: 5 }, grid: { verticalLines: true, horizontalLines: true, color: #e0e0e0 } } );mode: time 是 Flotr2 的另一个内置特性启用后 x 轴数据值会被当作 Unix 毫秒时间戳处理配合 timeFormat 控制显示格式。timeFormat 的具体格式语法来自 Flotr2 内部的一个小型日期格式化工具不是标准的 Date.prototype 格式这里写 %Y-%m-%d 对应的输出是类似于 2024-11-15 的文字。如果你用的是原生 JavaSript 的 Date 格式化思路那很可能格式不对。noTicks 指定刻度数量Flotr2 会在这个限制下自动分配刻度间距。y 轴的 noTicks 不要设太大否则标签会上下重叠。grid 的三个参数里verticalLines 和 horizontalLines 默认都是 truecolor 默认是某种灰色。如果你明确不需要网格线把对应开关设为 false 可以减少视觉干扰。这些参数不算冷门但很容易在项目里被随手敲错比如把 verticalLines 拼成 verticalLineFlotr2 既不会报错也不会生效排查这种问题非常浪费时间所以配完参数后最好先渲染一次看效果。4.4 动态刷新数据实时页面的标准写法监控类页面很少画一张静态图就完事更多的是每隔几秒从后端拿新数据更新图形。Flotr2 没有提供专门的数据更新 API它的做法是重新调用 Flotr.draw用新数据把旧图覆盖掉。下面这种写法是动态刷新的最小模板// 每 3 秒增加一个随机点并重绘 setInterval(function() { var newValue Math.random() * 10; // 追加到数组末尾 data.push([data.length, newValue]); // 去掉最前面的老点保持窗口在 20 个点以内 if (data.length 20) { data.shift(); // 因为 x 坐标是基于数组长度计算的shift 后需要重新对齐 for (var i 0; i data.length; i) { data[i][0] i; } } Flotr.draw(document.getElementById(chart-container), [data], options); }, 3000);这里的关键点是 Flotr2 不会自动扩充容器宽度如果你的容器宽度固定x 轴范围不变数据点一直向右增长最后线会从容器右侧被截断所以必须手动做滚动窗口。用 data.shift() 删除旧数据的同时重排 x 坐标保证 x 轴始终从 0 开始。如果 x 轴代表时间戳重排逻辑要改成基于实际时间的滚动。另外重复调用 Flotr.draw 时Flotr2 内部会在画新图之前自动清空画布所以你不必手动清空 Canvas。如果用的是老版本或者性能不佳的设备重绘大面积图表会有一个明显的闪烁感这个可以通过把 Canvas 放在独立图层里或降低重绘频率来缓解。5. 避坑指南flotr2 使用中的 5 个高频踩坑记录5.1 引入顺序错误导致 Flotr is not defined现象是浏览器控制台直接报错Uncaught ReferenceError: Flotr is not defined页面一片空白。原因是 flotr2.min.js 的 script 标签放到了绘图脚本之后或者绘图代码在 head 里同步执行时容器尚未渲染。浏览器按顺序解析同步 script绘图代码执行那一刻 Flotr 全局变量确实还不存在。解决方法是把 flotr2.min.js 的 script 标签放在所有调用 Flotr 的代码之前且推荐放在 body 末尾。如果还是报错检查一下文件路径拼写尤其是相对路径里多了一层目录的情况用浏览器开发者工具的 Network 面板确认文件实际加载状态HTTP 404 的时候文件没加载进来报错现象和引入顺序错误完全一样。5.2 数据嵌套层级不对图画不出来或画出来完全不对现象是页面不报错但画出来是一片空白或者是一堆杂乱无章的线条形状和数据对不上。原因是 Flotr.draw 第二参数的结构层级要求是序列数组套点数组套点坐标很多人第一版写成了直接传二维数组。如果单个序列直接传 [[0, 1], [1, 2]] 这种结构Flotr2 会把外层当成多个序列每个序列只有一组坐标结果坐标格式不合法画出来自然不对。解决方法是无脑统一用序列对象 [{ data: [[0, 1], [1, 2]] }] 这种格式宁可多一层嵌套也不要少。这个格式对折线、柱状、饼图全部适用统一之后也避免了不同图表类型之间的格式切换混乱。5.3 时间模式 x 轴显示乱码或全是 1970 年现象是 mode: time 开了之后x 轴刻度显示成一串奇怪的数字或者全部显示为 1970 年附近的时间。原因是时间戳单位不对。Flotr2 的时间模式按 Unix 毫秒时间戳计算如果你传入的数据是从接口拿到的秒级时间戳10 位数字数值比毫秒差了 1000 倍换算出来日期就回到 1970 年了。解决方法是在组装数据时把秒级时间戳乘以 1000统一转成毫秒级再传给 Flotr2。这里还要注意 timeFormat 的格式占位符不是标准的 JavaSript 日期方法里的写法比如年份要用 %Y 而不是 YYYY 或 yyyy写错了只会在显示时出现字符串原样输出不会报错排查起来需要仔细对照 Flotr2 源码里的格式解析逻辑。5.4 饼图扇区文字无法显示现象是饼图画出来了但每个扇区上没有对应的比例数字或名称文字。查了一圈配置项都找不到类似 labelText 或 showLabel 的开关。原因是 Flotr2 的 pie 模式在设计时就没有把文字画到扇区内这个功能。它的 text 相关能力只在鼠标追踪的 tooltip 里提供不是不给你配置机会是功能根本不存在。解决方法是利用 mouse.track 和 mouse.trackFormatter 实现悬浮展示或者自己写一个 HTML 覆盖层把计算结果用 CSS 定位到对应坐标。我通常会选择后者用一段额外的 DOM 来做因为鼠标悬浮展示对触屏设备不友好覆盖层在任何设备上都能看到内容。5.5 容器尺寸为 0 导致图表不可见现象是 div 存在Flotr.draw 没有报错但画布上什么都没有。原因是容器 div 没有显式 height而 Flotr2 初始化时读取了容器的高度这时高度是 0Canvas 画布也就创建成 0 像素。很多浏览器默认 div 高度由内容撑开内容为空时高度就是 0。解决方法是手动给容器设置固定高度比如 height: 300px或者设置百分比高度且父元素高度确定。这个坑几乎所有人都会踩一次因为简单地以为 div 里放上 Canvas 就会自动撑开高度忘了 Canvas 的坐标是绝对的需要容器高度配合。6. 进阶玩法把 flotr2 接进现代前端项目和更大的数据展示场景6.1 flotr2 与单页应用的共存方案老项目里用 flotr2 很常见但有些场景是你没法选老技术栈必须把它嵌进现代的 Vue 或 React 项目里做局部图表。Flotr2 没有 npm 官方包但这不妨碍使用最常见做法是把 flotr2.min.js 放进项目的 vendor 目录然后在生命周期钩子里调用。以 Vue 3 为例// 在 setup 里引入文件路径确保全局 Flotr 可用 import /src/vendor/flotr2.min.js; export default { mounted() { // this.$refs.chart 对应模板中的 div ref Flotr.draw(this.$refs.chart, [ { data: [[0, 1], [1, 3], [2, 4]], lines: { show: true } } ], { grid: { verticalLines: false } }); }, beforeUnmount() { // 如果多次重复绘图且 container 会被复用需要手动清理 const canvas this.$refs.chart.querySelector(canvas); if (canvas) { canvas.width 0; canvas.height 0; } } };这样接的代价是 Flotr 变成了一个隐式全局依赖但换来的是旧代码的图表配置可以原样复制粘贴过来不需要做任何适配。注意 beforeUnmount 里的手动清理Flotr2 不会监听组件卸载事件你不清理它画布内容会留在 DOM 里下一次初始化同一容器时可能看到上一次残留帧。我习惯在卸载时把 canvas 尺寸清零让垃圾回收更干脆。React 里的思路相同用 useEffect 包裹 Flotr.draw 调用并在 cleanup 里做相同的手动清理。Flotr2 的这种全局变量模型虽然丑但在旧组件迁移场景下反而省事因为不需要重写数据绑定逻辑。6.2 性能边界数据量到多少会卡Flotr2 在 Canvas 上绘制的性能在它诞生的年代算是不错的但拿今天的标准看数据点超过一定量级就会出现可感知的卡顿。我的经验边界是单序列 5000 个点以下流畅10000 个点以上开始有体感掉帧50000 个点以上滚动画布基本不可用。如果数据量超过这个阈值我的标准做法是先做数据抽稀再交给 Flotr2。抽稀不是简单每隔 N 点取一个而是保留极值点避免把最高峰和最低谷滤掉// 简单的抽稀算法窗口内保留最大值和最小值 function downsample(data, threshold) { if (data.length threshold) { return data; } var result []; var bucketSize Math.floor(data.length / threshold); for (var i 0; i data.length; i bucketSize) { var slice data.slice(i, i bucketSize); var maxPoint slice[0]; var minPoint slice[0]; for (var j 1; j slice.length; j) { if (slice[j][1] maxPoint[1]) maxPoint slice[j]; if (slice[j][1] minPoint[1]) minPoint slice[j]; } result.push(maxPoint, minPoint); } return result; }这个算法的开销很低每次重绘前对原始数据跑一遍即可效果比均匀抽稀好得多保留波峰波谷后曲线形态基本不变。性能优化还有一个容易被忽略的点重绘时把 x 轴范围固定下来避免 Flotr2 每次都重新计算坐标范围。坐标范围的统一可以在配置里通过 min 和 max 强制指定。6.3 验证修改小技巧直接在浏览器控制台里改配置最后分享一个我排错时经常用的小技巧。Flotr2 的绘图函数是一个全局暴露的纯函数这意味着你不需要刷新页面就可以在开发者工具的控制台里直接调用它实时验证配置改动。做法是先在这个页面初始化一张图确认 Flotr 全局变量存在然后在 Console 里手动输入代码Flotr.draw( document.getElementById(chart-container), [{ data: sampleData, lines: { show: true, lineWidth: 4 } }], { grid: { color: #333333 } } );这里 sampleData 如果在全局作用域里有定义就可以直接引用没有定义就现场组装一个数组塞进去。这个做法特别适合调样式因为样式参数是否正确光靠读代码很难判断尤其是颜色、线宽这些视觉参数直接在控制台改一次看一次效果比改代码刷新页面快得多。等到确认配置项生效后再把这些参数原样粘贴回项目代码里。我几乎每次改完配置都靠这个方式做二次确认。原因很简单Flotr2 是无声失效型库很多配置项拼写错误不会抛异常只有看到实际渲染结果才能确信参数真的起作用。比如我前面说过的 verticalLine 和 verticalLines 的区别这种问题不用控制台验证的话也许会浪费很多时间在代码和文档里找原因而实际就是一个 s 字母的事。这些年断断续续维护老项目flotr2.min.js 这个文件始终在我的工具箱里占一个位置。它不新文档不全有一些设计缺陷但它足够小、足够简单、足够容易接入在一些特殊环境里反而比花哨的新库可靠。如果你只是需要在一张区域内快速画几条趋势线不考虑交互复杂度和触屏适配拿 flotr2 直接开工没什么问题。建议先把本文里的最小例子跑通再根据实际需求逐项加配置。希望这些内容能帮你在引入和使用 flotr2 时少走一些弯路。本文还有配套的精品资源点击获取