uPlot 轻量级时序图表快速上手指南：48 KB 的库，25 ms 画出 16 万个数据点

【免费下载链接】uPlot📈 A small, fast chart for time series, lines, areas, ohlc & bars项目地址: https://gitcode.com/gh_mirrors/up/uPlot

监控页面要一次性画 10 万个数据点，体验常常是：白屏好几秒，图表终于出来，再拖一下缩放，整个标签页开始卡。uPlot 要解决的就是这件事——它是一个基于 Canvas 2D 的轻量级图表库，体积约 50 KB，冷启动时 25 ms 就能创建一张包含 166,650 个数据点的可交互图表。

uPlot 是什么：一句话定位 + 五个关键事实

一句话：uPlot 是一个专注时序、小而快的 Canvas 2D 图表库，MIT 协议，npm 包名uplot。

• 渲染方式：Canvas 2D，不依赖 WebGL 着色器或 WASM，冷启动没有额外初始化成本
• 体积：约 50 KB（min），官方基准测试实测 47.9 KB（含渲染所需依赖）
• 覆盖图表：时序、折线、面积、柱状、K 线（OHLC）、多系列多 Y 轴、对数刻度、高低带、正负堆叠
• 内置交互：缩放且自动重算刻度、图例实时取值、多图十字光标同步、聚焦最近系列
• 上手成本：npm install uplot即可用；仓库 demos/ 目录放了近百个可直接打开的示例

数据对比：47.9 KB、34 ms、10% CPU 三个数字

先看结论：官方基准里 uPlot 是唯一低于 50 KB 的库，冷启动时间也是所有完成渲染的库中最短的。

测试条件：2023-03-11，AMD Ryzen 7 PRO 5850U，Chrome 113，4K 屏缩放到 1440p，全部绘制同一张 166,650 点的折线图。摘录如下（完整 11 个库见 bench/results.json）：

47.9 KB是第一个要记住的数字：约为 Chart.js 的 1/5、ECharts 的 1/20，页面少下载近 1 MB。

第二个数字是交互阶段的吞吐：渲染完成后，缩放与光标移动按约100,000 点/ms线性推进，十万点级别的数据在窗口内拖动依然跟手。

第三个数字来自流式场景：以 60fps 持续更新 3,600 个点时，uPlot 占10% CPU、12.3 MB 内存；同等条件下 Chart.js 是 40% / 77 MB，ECharts 是 70% / 85 MB。

从 0 到出图：装包、备数据、一个代码块

第一步安装：npm install uplot。

第二步准备数据。uPlot 只接受一种数据格式——二维数组：第一列是 x 轴（秒级时间戳或普通数字），之后每一列是一条系列的取值。它不解析 CSV、不做聚合，拿到什么数组就画什么，这点在写数据管道时反而省心。

第三步出图，在页面放一个有宽高的容器<div id="chart"></div>，然后：

import uPlot from "uplot"; import "uplot/dist/uPlot.min.css"; // 官方基础样式，必须引入 // 第一列是 x 轴（秒），后面每列是一条系列 const data = [ [1620000000, 1620086400, 1620172800], [10, 20, 30], ]; // 三个参数：配置、数据、容器 new uPlot({ series: [{}, { label: "数值" }], // 第 1 项对应 x 轴，之后逐一对应系列 }, data, document.getElementById("chart"));

到这里就能看到一张带坐标轴、图例和十字光标的折线图。换颜色改对应系列的stroke/fill；改刻度（比如 y 轴固定范围或对数）写scales；改坐标轴标签写axes，结构都很直白，细节可对照 docs/README.md。

场景拆解：流式监控、金融 K 线、十万级冷启动

实时监控仪表盘：60fps 灌数据不卡

• 解决什么问题：数据每秒推送多次，页面不能卡、内存不能涨。
• 怎么实现：demos/sine-stream.html 每帧调用u.setData(newData)推入 3,600 个新点，整个示例不到 180 行，抄走就能用。
• 效果：CPU 占用 10%、内存 12.3 MB，可打开 Chrome 的 Performance monitor 自行复核：

官方 README 还给了一个排障技巧：若 CPU 顶到 100%，先查chrome://gpu，再到chrome://flags里强制开启Canvas out-of-process rasterization，在部分硬件上帧率提升明显。

金融 K 线：蜡烛、成交量与十字光标一次到位

• 解决什么问题：交易类页面标配的蜡烛图 + 成交量 + 跟随光标的实时取值。
• 怎么实现：demos/candlestick-ohlc.html 是现成 K 线示例，核心是series内置的 bar 路径加上涨跌双色配置；需要多图表联动时，十字光标同步在 demos/sync-cursor.html 里。
• 效果：缩放时 y 轴自动重算，图例实时显示光标处的值，无需手写任何交互逻辑。

十万级历史数据：冷启动不白屏

• 解决什么问题：回测、审计类页面首屏就是 10 万点以上，普通库要转圈等好几秒。
• 怎么实现：25 ms 完成 166,650 点的冷启动，之后缩放按约 10 万点/ms 推进；怀疑数字？原始数据在 bench/results.json，bench/ 目录可本地复现。
• 效果：首屏直接是可交互的完整图表，不需要 loading 占位图。

决策清单：谁该选 uPlot，谁该看别家

适合你，如果：

• 主力场景是时序/监控/金融数据，点量大、刷新频率高
• 在意打包体积：移动端、低端设备、或页面里已塞满依赖
• 需要多图协作：多图光标同步、多 Y 轴、IANA 时区与夏令时
• 有缺失数据、正负堆叠、高低带这类时序常见需求
• 用 React/Vue/Svelte 或 Python（社区已有对应封装）

不适合你，如果（以下均为项目 README 明确声明）：

• 想要过渡动画——官方立场是"永不加入"，认为纯干扰
• 需要库自带数据聚合/统计——它只负责画，统计请在数据管道上游完成
• 想要内置拖拽平移——官方因交互语义含糊未内置，需通过钩子/插件自行添加
• 视口内数据超过 10 万点——官方建议改用 WebGL/WebGPU 方案
• 主打饼图、分类图等非时序形态——那不是它的定位

一句话：追求"用最小体积最快把大量数据画出来"，选 uPlot；追求开箱即用的动画与统计全家桶，选功能型主流库。

下一步：三句话完成试用

在你的项目里执行npm install uplot，贴上面那段代码，第一张图表现在就能看到。接着打开 demos/index.html 把近百个示例点一遍，挑最接近你业务的复制配置。卡住了再读 docs/README.md，它把概念和 API 都讲清楚了。

【免费下载链接】uPlot📈 A small, fast chart for time series, lines, areas, ohlc & bars项目地址: https://gitcode.com/gh_mirrors/up/uPlot