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

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 KBmin官方基准测试实测 47.9 KB含渲染所需依赖覆盖图表时序、折线、面积、柱状、K 线OHLC、多系列多 Y 轴、对数刻度、高低带、正负堆叠内置交互缩放且自动重算刻度、图例实时取值、多图十字光标同步、聚焦最近系列上手成本npm install uplot即可用仓库 demos/ 目录放了近百个可直接打开的示例数据对比47.9 KB、34 ms、10% CPU 三个数字先看结论官方基准里 uPlot 是唯一低于 50 KB 的库冷启动时间也是所有完成渲染的库中最短的。测试条件2023-03-11AMD Ryzen 7 PRO 5850UChrome 1134K 屏缩放到 1440p全部绘制同一张 166,650 点的折线图。摘录如下完整 11 个库见 bench/results.json库体积冷启动完成堆内存峰值 → 最终uPlot v1.6.2447.9 KB34 ms21 MB → 3 MBChart.js v4.2.1254 KB38 ms29 MB → 10 MBECharts v5.4.11000 KB55 ms17 MB → 3 MBdygraphs v2.2.1132 KB90 ms88 MB → 42 MBPlotly.js v2.18.23600 KB310 ms104 MB → 70 MBApexCharts v3.37.1503 KB685 ms175 MB → 46 MB47.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 MBECharts 是 70% / 85 MB。从 0 到出图装包、备数据、一个代码块第一步安装npm install uplot。第二步准备数据。uPlot 只接受一种数据格式——二维数组第一列是 x 轴秒级时间戳或普通数字之后每一列是一条系列的取值。它不解析 CSV、不做聚合拿到什么数组就画什么这点在写数据管道时反而省心。第三步出图在页面放一个有宽高的容器div idchart/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.jsonbench/ 目录可本地复现。效果首屏直接是可交互的完整图表不需要 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

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

相关推荐

基于ADS122U04与PIC18LF45K22的HVAC高精度温度采集系统设计

工业级温度测量系统：ADS122U04IPWR与STM32F405RG硬核协同设计

工业级温度测量：ADS122U04IPWR+STM32F427ZI高精度传感方案

更多资讯

QT+OpenCV工业图像处理框架：支持多线程、热插拔与跨平台部署

Nginx反向代理优化ZrLog高可用架构实践

程序员必备的AI思考框架：任务分解、反思优化与多智能体辩论

技术人如何用产品思维打造AI产品

SRA Toolkit下载卡99%真相：协议层阻塞与原生参数优化方案

物联网视频融合平台架构与关键技术解析

今日更新

多智能体协作系统架构设计与实践优化

大模型系统性入门实战指南：从原理到部署微调的全链路路线

鸿蒙文件系统沙箱机制解析与开发实践

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？