简介：这份资源面向需要在网页中实现数据可视化的前端开发者与初学者，提供Flotr2图表库的核心压缩文件及配套入门示例。Flotr2支持折线图、柱状图、饼图、散点图等多种图表类型，可与HTML、CSS、JavaScript结合，满足报表展示、数据分析等场景的绘图需求。压缩包共3个文件，包含1个html示例页面、1个js核心库和1个txt说明文档，整体约33KB，其中min.js为压缩混淆后的生产版本，便于提升加载速度。示例页面演示了引入库、组织数据、选择图表类型、配置颜色与轴刻度、添加图例等基本流程，并附有官方实例地址，方便进一步查阅完整功能与交互配置。目前已有354人学习下载，适合希望快速上手Flotr2、掌握图表绘制与定制方法的读者参考实践。
1. 一个 30KB 的老图表库，为什么还有人翻出来用
翻旧项目的时候，你大概率会撞见一个叫flotr2.min.js的文件，压缩后三十来 KB，扔在js/lib/目录里，旁边可能还躺着 jQuery 1.x。它不依赖任何框架，new Flotr.Chart()一调就能在 canvas 上画出折线、柱状、饼图，甚至带缩放和拖拽选择。放到今天，前端图表生态早就被 ECharts、Chart.js 这些方案占满，但 flotr2 依然有它的位置：老后台系统维护、内网离线环境、嵌入式设备 Web 面板、只需要一张静态趋势图又不想引入几百 KB 依赖的场景。这篇笔记就围绕「flotr2.min.js 包 + 简单例子」这条线，把包怎么拿、页面怎么引、最小可跑例子怎么写、参数怎么调、坑在哪，一步步讲清楚。适合手头有老项目要改、或者想给一个轻量页面快速加图表的人。
2. flotr2.min.js 包从哪来、怎么放进项目
2.1 这个包到底是什么，和 flotr、flot 的关系
flotr2 是 flotr 的续作，底层用 HTML5 canvas 绘制，不依赖 jQuery（flotr 老版本依赖 Prototype.js，flot 依赖 jQuery，别搞混）。它的发布形态就是一个单文件flotr2.min.js，外加可选的flotr2.ie.min.js用于老 IE 的 canvas 兼容。核心 API 挂在全局Flotr对象上，画图入口是Flotr.draw(container, data, options)，或者用new Flotr.Chart()这种面向对象的写法。整个库没有构建步骤，没有 npm 依赖树，这也是它在离线内网里活得久的原因——拷贝一个文件就完事。
需要区分的是：网上搜「flotr2」会同时出现源码版flotr2.js和压缩版flotr2.min.js。生产用 min 版，调试想看内部逻辑时临时换成源码版。两者 API 完全一致，不要同时引入，否则Flotr全局变量会被覆盖，出现一些莫名其妙的渲染问题。
2.2 获取包的三种可靠途径
第一种，从你现有老项目的js/lib/或static/vendor/目录里直接捞，这是最稳的，因为版本和现有代码已经磨合过。第二种，从 flotr2 的官方仓库发布产物里取，注意只取flotr2.min.js这一个文件即可，不需要整个仓库。第三种，如果项目已经上了包管理，可以用 npm 装（包名就是flotr2），但很多老项目根本没有 npm 环境，这时候手动拷贝反而更快。
我一般会这样做版本归档，避免以后找不到：
# 在项目里建一个明确的第三方库目录，按库名+版本归档 mkdir -p static/vendor/flotr2/0.5.0 cp flotr2.min.js static/vendor/flotr2/0.5.0/ # 记录来源和校验值，方便以后核对是不是同一个文件 sha256sum static/vendor/flotr2/0.5.0/flotr2.min.js \ > static/vendor/flotr2/0.5.0/SHA256SUMS逻辑说明：把第三方库按「库名/版本号」两级目录存放，是为了将来升级或排查时能一眼看出用的是哪版。sha256sum生成校验值，是因为 min 文件被人改过一两个字符很难肉眼发现，留个指纹，出问题时能确认文件没被动过。参数上没什么可调的，目录名里的版本号按你实际拿到的填，拿不准就写unknown，别瞎编版本号。
2.3 在 HTML 里正确引入的顺序
引入本身只有一行<script>，但顺序有讲究。flotr2 不依赖 jQuery，所以它可以放在 jQuery 之前或之后，但必须放在你自己的绘图脚本之前。常见翻车是：绘图脚本写在<head>里，flotr2 却放在</body>前，结果脚本执行时Flotr还是 undefined。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>flotr2 最小示例</title> <!-- 先引入库，再引入业务脚本 --> <script src="/static/vendor/flotr2/0.5.0/flotr2.min.js"></script> </head> <body> <div id="chart" style="width:600px;height:300px;"></div> <script> // 业务脚本必须在 flotr2 之后执行，此时 Flotr 已挂到 window 上 window.addEventListener('DOMContentLoaded', function () { var container = document.getElementById('chart'); var data = [[[0, 3], [1, 8], [2, 5], [3, 13]]]; Flotr.draw(container, data, {}); }); </script> </body> </html>逻辑说明：DOMContentLoaded保证容器#chart已经存在，否则 canvas 挂不上去。data的结构是「系列数组」，外层数组每个元素是一个数据系列，系列内部是[x, y]点对。Flotr.draw第三个参数是配置对象，这里传空对象走默认样式。参数上，容器必须有明确的宽高（CSS 或行内样式都行），flotr2 不会自己撑开一个零高度容器，这是新手第一个卡点。
3. 从零写一个能跑的简单例子
3.1 折线图最小可运行代码
先把最基础的折线图跑通，再往上加东西。下面这段可以直接存成.html双击打开。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>flotr2 折线图</title> <script src="./flotr2.min.js"></script> </head> <body> <div id="line-chart" style="width:640px;height:320px;"></div> <script> var data = [ // 系列一：访问量 { label: '访问量', data: [[0, 120], [1, 200], [2, 150], [3, 280], [4, 260]] }, // 系列二：下单量 { label: '下单量', data: [[0, 20], [1, 45], [2, 30], [3, 70], [4, 65]] } ]; Flotr.draw(document.getElementById('line-chart'), data, { // 显示图例 legend: { position: 'ne' }, // x 轴按整数刻度显示 xaxis: { tickDecimals: 0 }, // y 轴从 0 开始，避免视觉夸大差异 yaxis: { min: 0 }, // 鼠标悬停显示数值 mouse: { track: true } }); </script> </body> </html>逻辑说明：每个系列用对象形式{ label, data }，label会出现在图例里。legend.position取值ne/nw/se/sw，分别对应四个角。xaxis.tickDecimals: 0让 x 轴刻度不带小数，否则默认可能显示0.0、1.0。yaxis.min: 0是数据可视化的基本素养，折线图不从零开始容易误导读者。mouse.track: true开启跟随鼠标的数值提示，这是 flotr2 自带的能力，不用额外写事件。
3.2 柱状图和饼图怎么改配置
flotr2 的图表类型不是靠单独的类，而是靠bars、pie这些配置项切换。折线是默认行为，加bars: { show: true }就变柱状图。
// 柱状图：在折线配置基础上加 bars Flotr.draw(document.getElementById('bar-chart'), data, { bars: { show: true, barWidth: 0.5, align: 'center' }, xaxis: { tickDecimals: 0 }, yaxis: { min: 0 }, legend: { position: 'ne' } }); // 饼图：数据结构不同，每个系列一个扇区 var pieData = [ { label: '直接访问', data: [[0, 335]] }, { label: '搜索引擎', data: [[0, 480]] }, { label: '外部链接', data: [[0, 120]] } ]; Flotr.draw(document.getElementById('pie-chart'), pieData, { pie: { show: true, explode: 8 }, legend: { position: 'se' } });逻辑说明：柱状图的barWidth是相对刻度宽度的比例，0.5表示柱子占半个刻度宽，太宽会挤在一起，太窄看着像牙签。align: 'center'让柱子以刻度点为中心，默认是'left'，会导致柱子整体偏左。饼图的数据结构是「每个系列一个扇区」，data里那个[0, 335]的 x 值其实没意义，flotr2 只看 y 值算比例，但格式必须保持[x, y]。explode: 8让扇区之间拉开 8 像素，视觉上更清楚。
3.3 数据格式的三种写法和常见错误
flotr2 的数据格式看着简单，实际写错的人不少。它接受三种形式：[x, y]点对数组、纯 y 值数组（x 自动从 0 递增）、以及带label的对象包装。混用会出问题。
| 写法 | 示例 | 适用场景 |
|---|---|---|
| 点对数组 | [[0,3],[1,8]] | x 轴非等距或需要精确控制 |
| 纯 y 数组 | [3, 8, 5, 13] | x 轴就是 0,1,2,3 的顺序 |
| 对象包装 | {label:'A', data:[[0,3]]} | 需要图例、多系列 |
常见错误是给纯 y 数组又套了一层，写成[[3,8,5]]，flotr2 会把它当成一个点[3,8]加一个孤立值5，图就画歪了。另一个坑是 x 值不递增，比如[[2,5],[1,8]]，折线会来回折返，看着像乱码。数据从后端来的时候，务必先排序再喂给 flotr2。
4. 参数调优和交互功能怎么配
4.1 坐标轴、网格、颜色的关键参数
默认样式比较朴素，实际项目里一般要调这几处。下面这张表是我常用的参数清单，改完基本能应付大多数后台图表需求。
| 参数 | 作用 | 常用值 |
|---|---|---|
xaxis.min / max | 锁定 x 轴范围 | 数字或null自动 |
xaxis.tickDecimals | 刻度小数位 | 0表示整数 |
yaxis.min | y 轴起点 | 折线图建议0 |
grid.color | 网格线颜色 | '#e0e0e0'浅灰 |
grid.verticalLines | 是否画竖网格 | true / false |
colors | 系列颜色数组 | ['#1f77b4','#ff7f0e'] |
lines.lineWidth | 折线粗细 | 2比较舒服 |
Flotr.draw(container, data, { colors: ['#2f7ed8', '#f28f43', '#8bbc21'], grid: { color: '#e6e6e6', verticalLines: false }, xaxis: { tickDecimals: 0, min: 0 }, yaxis: { min: 0 }, lines: { lineWidth: 2, fill: false }, legend: { position: 'nw', backgroundColor: '#ffffff' } });逻辑说明：colors按系列顺序取色，系列多于颜色数时会循环。grid.verticalLines: false只留横线，图表更干净，这是个人偏好，数据密集时建议保留竖线辅助读数。lines.fill: false关闭折线下方填充，多系列叠加时填充会互相遮挡，除非只画一条线否则别开。
4.2 缩放、拖拽选择和鼠标追踪
flotr2 内置了交互能力，不用自己写 canvas 事件。开启方式是在配置里加selection和mouse。
Flotr.draw(container, data, { mouse: { track: true, trackFormatter: function (obj) { // obj.x / obj.y 是当前鼠标对应的数据坐标 return 'x=' + obj.x + ', y=' + obj.y; }}, selection: { mode: 'xy', color: '#cccccc' }, zoom: { interactive: false } });逻辑说明：mouse.track开启数值跟随，trackFormatter自定义提示文案，返回字符串即可。selection.mode取值'x'、'y'、'xy'，决定框选时锁定哪个方向。框选之后默认会触发flotr:select事件，需要自己监听并重绘来实现缩放：
container.addEventListener('flotr:select', function (e) { var area = e.detail; // {x1, y1, x2, y2} // 用选中区域作为新的坐标范围重绘 Flotr.draw(container, data, { xaxis: { min: area.x1, max: area.x2 }, yaxis: { min: area.y1, max: area.y2 } }); });参数上注意，area里的坐标是数据坐标不是像素坐标，直接拿来当min/max就行。如果框选后图表没反应，先确认事件名拼写是flotr:select，不是select。
4.3 多系列叠加和双 y 轴的处理
后台图表经常要「柱状 + 折线」叠加，或者左右两个 y 轴。flotr2 支持，但配置要写对。
var mixed = [ { label: '订单量', data: [[0,120],[1,200],[2,150]], bars: { show: true } }, { label: '转化率', data: [[0,0.12],[1,0.2],[2,0.15]], lines: { show: true }, yaxis: 2 } ]; Flotr.draw(container, mixed, { yaxis: { min: 0 }, yaxis2: { min: 0, max: 1, position: 'right', tickDecimals: 2 }, legend: { position: 'ne' } });逻辑说明：系列级别的bars、lines配置会覆盖全局配置，所以可以一个系列画柱、一个系列画线。yaxis: 2表示这个系列绑定到第二个 y 轴，对应配置里的yaxis2。position: 'right'把第二轴放右边。坑在于：如果系列绑了yaxis: 2但没定义yaxis2，flotr2 不会报错，而是默默用默认轴，图看着正常但数值对不上，排查时容易懵。
5. 避坑与常见问题排查
5.1 图表不显示，容器一片空白
现象：页面加载后容器区域什么都没有，控制台也没报错。原因通常是容器高度为 0，或者绘图脚本在容器渲染前执行。flotr2 依赖容器的实际像素尺寸来创建 canvas，height: auto或没设高度都会导致 canvas 高度为 0。解决：给容器显式设置宽高，用 CSS 类或行内样式都行；同时把绘图逻辑放进DOMContentLoaded或放在容器之后的<script>里。
5.2 中文标签显示成方块或乱码
现象：图例、坐标轴标签里的中文变成方框。原因有两个，一是页面<meta charset>没声明或声明错误，二是 canvas 绘制文字时字体没指定中文字体。解决：HTML 头部加<meta charset="utf-8">；在配置里指定字体，比如xaxis: { fontFamily: '"Microsoft YaHei", sans-serif' }，图例同理legend: { fontFamily: ... }。注意 canvas 的字体设置是逐个元素配的，没有全局一处生效的说法。
5.3 数据点很多时页面卡顿
现象：几千个点画折线，鼠标移动明显掉帧。原因是 flotr2 每个点都参与 canvas 绘制和鼠标追踪计算。解决：数据量超过一两千点时，先做降采样，比如每 10 个点取一个，或者按时间窗口聚合；同时关掉mouse.track，改成点击某个点才显示数值。如果只是展示趋势，lines.fill也关掉，减少绘制量。
5.4 引入顺序错误导致 Flotr is not defined
现象：控制台报Flotr is not defined。原因就是前面说的脚本顺序问题，业务脚本跑在库加载之前。解决：确保flotr2.min.js的<script>标签在业务脚本之前；如果用了defer或async，要保证业务脚本在库的onload之后执行，最省事的做法是都不用异步属性，按顺序同步加载。
5.5 老 IE 下 canvas 不工作
现象：IE8 及以下图表区域空白。原因：flotr2 主文件依赖原生 canvas，老 IE 没有。解决：额外引入flotr2.ie.min.js，它内部用 VML 模拟 canvas。不过说实话，现在还维护 IE8 的项目已经很少了，如果目标环境确定是老 IE，引入前先确认这个兼容文件和你手上的 flotr2 版本匹配，别混用不同版本的兼容层。
6. 把 flotr2 用稳的几个进阶习惯
真正让 flotr2 在项目里活得久的，不是会画图，而是几个工程习惯。第一个是封装一层自己的绘图函数，别让Flotr.draw散落在各个页面里。我一般会写一个renderChart(containerId, series, overrides)，把默认配置、颜色、字体、坐标轴规则都收进去，业务代码只传数据和少量覆盖项。这样将来换库或者调样式，只改一个地方。
// 统一封装，业务侧只关心数据 function renderChart(el, series, overrides) { var base = { colors: ['#2f7ed8', '#f28f43', '#8bbc21'], grid: { color: '#e6e6e6' }, xaxis: { tickDecimals: 0 }, yaxis: { min: 0 }, legend: { position: 'ne', fontFamily: '"Microsoft YaHei", sans-serif' } }; // 浅合并，overrides 覆盖 base 的同名顶层键 var opts = Object.assign({}, base, overrides || {}); return Flotr.draw(el, series, opts); }第二个习惯是数据进来先做一次清洗和排序，尤其是从接口拿的数组，x 值乱序、含 null、含字符串数字，这三种情况 flotr2 都不会给你友好提示，只会画出诡异的图。我一般会在封装函数里加一道normalize，把[x, y]里的 x 强制转数字、按 x 升序排、过滤掉 y 为 null 的点。第三个习惯是给图表容器加一个 resize 监听，窗口变化时重绘，因为 canvas 尺寸是绘制时定死的，不会跟着 CSS 自适应。重绘前记得清空容器，否则会叠出多张 canvas。
window.addEventListener('resize', function () { var el = document.getElementById('chart'); el.innerHTML = ''; // 清掉旧 canvas，避免叠加 renderChart(el, currentSeries, currentOverrides); });最后说个验证方法：改完配置别只看图「长得对不对」，打开控制台用Flotr.draw的返回值检查一下。它返回一个包含axes、series等信息的对象，能确认数据点数量、坐标范围是不是你预期的。我踩过最深的坑就是图看着正常，但 y 轴范围被自动算成了[0, 1]，因为数据里混了字符串，数值全被当成 0，肉眼根本看不出来。从那以后，我养成了每次接新数据源先console.log一下Flotr.draw返回值的习惯。希望帮到你。
本文还有配套的精品资源，点击获取
