使用jQuery Flot图表库绘制折线图、柱状图及实时动态数据更新

jQuery Flot 是一个诞生较早但至今仍在不少项目里活跃的轻量级绘图库。它依赖 jQuery，通过 canvas 绘制图表，没有太多花哨的动画和交互，却能把折线图、柱状图、面积图等基础图形画得干净利落。对于不想引入 ECharts、Chart.js 等相对较重方案，或者项目已经基于 jQuery 构建的团队来说，Flot 的学习成本很低，几个配置项就能出图。接下来从引入依赖开始，逐步把折线图、柱状图和实时刷新跑通。

环境准备与第一个折线图

使用 Flot 之前需要先加载 jQuery 和 Flot 的脚本文件。可以从官网下载 flot.js，也可以通过 CDN 引入。Flot 0.8.3 是常用的稳定版本，支持 IE9 及以上浏览器。在 HTML 中按顺序加载：先 jQuery，再 jquery.flot.js。如果需要时间轴插件或者堆叠插件，还要额外引入对应的文件，但基础折线图只需要主文件。

页面里放置一个 div 作为图表的容器，必须给它明确的宽度和高度，否则 Flot 无法计算绘图区域。然后调用 jQuery 的 $.plot 方法，传入容器选择器和数据数组。数据数组是一个二维数组，每个元素又是一个二元数组，分别表示 x 和 y 坐标。例如要画一条从 (0, 0) 到 (5, 5) 的直线，可以这样写：

// 基本折线图
var data = [
    [0, 0],
    [1, 2],
    [2, 1],
    [3, 4],
    [4, 3],
    [5, 5]
];
$.plot($("#placeholder"), [data]);

这里把 data 放在一个数组里传给 $.plot，是因为 Flot 支持同时绘制多个数据系列，外层数组的每一项代表一条线。如果只有一条线，就写成 [data]。运行这段代码后，容器里会出现一幅折线图，x 轴和 y 轴会自动根据数据范围调整刻度。默认线条是实线，颜色取 Flot 内置的颜色序列。

Flot 的很多细节都可以通过第三个参数来定制，比如坐标轴标签、网格颜色、图例位置等。常见的需求是修改坐标轴的最小值和最大值。假如希望 y 轴从 0 开始，可以传入 options 对象，设置 yaxis.min = 0。这个参数还可以指定数据点的样式，例如把折线上的点用圆圈标出来，需要配合 points 配置项。

多序列折线图与样式定制

实际应用里很少只画一条线，通常要对比几组数据。Flot 处理多序列非常简单，只要在传给 $.plot 的数据数组里放多个二维数组即可。每个序列还可以单独设置颜色、线宽和是否显示数据点。定义一个序列对象，包含 data 属性和 label 属性，label 用于图例显示，data 就是坐标数组。

下面这段代码创建了两条折线，分别代表两个季度的访问量走势。第一条用蓝色实线并带圆点标记，第二条用红色虚线不加点。配置项里的 lines 和 points 可以作用于所有序列，也可以放到单个序列里覆盖全局设置。

var seriesA = {
    label: "第一季度",
    data: [[1, 120], [2, 200], [3, 150], [4, 280], [5, 320]],
    color: "#3b8bba",
    lines: { lineWidth: 2 },
    points: { show: true, radius: 4 }
};
var seriesB = {
    label: "第二季度",
    data: [[1, 90], [2, 160], [3, 230], [4, 190], [5, 260]],
    color: "#d9534f",
    lines: { lineWidth: 1, dashPattern: [6, 3] },
    points: { show: false }
};
$.plot($("#placeholder"), [seriesA, seriesB], {
    grid: { borderWidth: 1, hoverable: true },
    xaxis: { min: 1, max: 5 },
    yaxis: { min: 0 },
    legend: { position: "nw" }
});

虚线是通过 dashPattern 数组设置的，它表示实线长度和空白长度的像素值。图例的位置可以设为 nw 表示左上角，也可以使用 se、ne 等方向。如果希望鼠标悬停时显示数据提示，需要开启 hoverable，然后自己绑定 plothover 事件读取坐标。

需要注意，Flot 默认会把 x 轴的数据当作数值处理，所以上面的季节用数字 1 到 5 表示。如果 x 轴是时间戳或日期，必须先将日期转换成毫秒值，或者使用 Flot 的时间插件。时间插件允许传入 Date 对象，并自动格式化刻度标签，但需要额外加载 jquery.flot.time.js。

柱状图的实现与堆叠模式

Flot 绘制柱状图同样依赖 $.plot，区别在于序列对象里要设置 bars 属性。最基础的配置是 bars: { show: true }，这时 Flot 会按照数据点的 x 坐标和 y 坐标画出垂直柱子。柱子的宽度默认根据相邻点之间的距离自动计算，也可以手动指定 barWidth，单位是 x 轴的单位长度。

下面展示一个简单的柱状图，统计一周内每天的订单量。x 轴从 1 到 7 表示周一至周日，y 轴表示订单数。为了让柱子更集中，设置 barWidth = 0.6，并且关闭折线显示。

var orders = {
    label: "订单量",
    data: [[1, 45], [2, 72], [3, 58], [4, 90], [5, 66], [6, 81], [7, 95]],
    bars: { show: true, barWidth: 0.6, align: "center" },
    color: "#5cb85c"
};
$.plot($("#placeholder"), [orders], {
    xaxis: { min: 0.5, max: 7.5, ticks: [[1,"周一"], [2,"周二"], [3,"周三"], [4,"周四"], [5,"周五"], [6,"周六"], [7,"周日"]] },
    yaxis: { min: 0 }
});

align 参数控制柱子相对于 x 坐标的对齐方式，center 表示柱子以 x 坐标为中心，left 或 right 则向相应方向偏移。如果希望横向柱状图，需要把数据点的 x 和 y 交换，并设置 bars: { horizontal: true }，此时 x 轴表示数值，y 轴表示类别，刻度也需要用 yaxis.ticks 来指定。

堆叠柱状图常用于展示多个部分对总量的贡献。Flot 支持堆叠插件，需要额外加载 jquery.flot.stack.js。启用堆叠后，同一 x 坐标上的多个序列会垂直叠加在一起。加载插件后，在 options 中设置 series: { stack: true }，所有序列的柱状图就会自动堆叠。注意堆叠模式下每个序列的数据点 x 坐标必须一致，否则会出现错位。

实时动态数据更新的实现

实时图表的核心是定时获取新数据并更新画面。Flot 提供了两种更新方式：一种是替换整个 plot 对象，另一种是调用 plot.setData() 和 plot.draw() 方法。后者效率更高，因为不需要重新创建坐标轴和网格，只重新绘制数据区域。典型做法是先使用 $.plot 创建图表并保存返回的 plot 实例，然后在定时器里更新数据数组。

假设每次刷新时服务器返回一个最新值，前端把它追加到现有序列的末尾，同时移除最早的数据点以保持窗口长度。以下示例模拟了每隔一秒产生一个随机温度值，并保留最近 20 个点。初始数据为空，首次绘图后使用 setInterval 更新。

var data = [];
var plot = $.plot($("#placeholder"), [data], {
    xaxis: { mode: "time", min: Date.now() - 20000, max: Date.now() },
    yaxis: { min: 0, max: 40 }
});

function update() {
    var now = Date.now();
    data.push([now, 20 + Math.random() * 15]);
    if (data.length > 20) {
        data.shift();
    }
    plot.setData([data]);
    plot.setupGrid();
    plot.draw();
    // 更新 x 轴范围，实现滚动窗口效果
    var axes = plot.getAxes();
    axes.xaxis.options.min = now - 20000;
    axes.xaxis.options.max = now;
    plot.setupGrid();
    plot.draw();
}

setInterval(update, 1000);

这里使用了时间模式，需要加载 jquery.flot.time.js 插件。每次更新时先修改数据，然后重新设置网格和坐标轴范围，再调用 draw。频繁调用 setupGrid 会带来额外开销，如果性能敏感，可以只在 x 轴范围需要改变时才调用一次，或者预先固定坐标轴范围。

另一个性能问题是重绘频率。一秒一次对于大多数折线图没有问题，但如果数据点非常多或者刷新间隔极短，canvas 重绘会造成 CPU 占用升高。可以适当降低刷新频率，或者对数据进行降采样。Flot 本身不做数据聚合，需要开发者在 push 之前判断新数据与上一个点的差异，过滤掉变化很小的值。此外，关闭动画、减少圆点标记也能提升实时渲染的流畅度。

在实际项目中，数据通常来自 Ajax 请求。可以使用 jQuery 的 $.ajax 或 $.getJSON 获取新数据，在成功回调里执行 plot.setData 和 plot.draw。建议把请求间隔设置在 1 到 5 秒之间，避免给服务器带来过大压力。如果服务器端支持 WebSocket，也可以把收到的数据推送到前端，这样比轮询更高效。

jQuery Flot折线图实时数据更新修改时间：2026-09-28 12:25:08