推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 594 days ago, the information mentioned may be changed or developed.

背景

我正在开发一个上位机的工具，是用 tcp 进行连接的。连接完了之后我会接收到数据，格式如下:

demo:>1,2,3
demo:>5,6,7

我需要对上面的数据进行解析组成每个通道的数据(通道由每一列元素)，如上所示就是有 3 个通道[1,5], [2,6], [3,7]。然后需要实时的绘图，最大的问题是，这个连接数返回的数据很大约 1s 有 1w 行的数据量。我要怎么进行一个比较好的数据绘图呢。

Supplement 1 · Mar 19, 2025

就是波形图，连接之后的数据流，一直在绘制。我想过最大的容量是每个通道 50W 个点，然后用一个双端队列来存储我的数据。但是我用 echart 来绘制感觉太卡顿了

前端

高频数据绘图库

实时绘图

23 replies • 2025-03-20 10:27:36 +08:00

liuhuihao

Mar 18, 2025

具体是要绘制成什么样子呢？三个柱状图，每个柱状图表示每个通道数据的数据和？ 6 ，8 ，10 这样？

crysislinux

Mar 18, 2025 via Android

你需要先找一个合适的采样算法，屏幕上肯定不可能全部去画的

UnluckyNinja

Mar 18, 2025 via Android

数据正常更新，绘图时 raf debounce 就行了，高频低频对接基本都是这个策略

fenglayting

Mar 18, 2025

使用 canvas 绘制图片，每次重新绘制图片，使用 webworker 加 WebSocket 推送，数据比较大需要后端压缩，前端解压；一秒一次很慢了。。

Mar 18, 2025

可以试试 [scichart]( https://www.scichart.com/javascript-chart-features/)

mayli

Mar 19, 2025

这个连接数返回的数据很大约 1s 有 1w 行的数据量

这个 1w 行是每行刷新绘制一次？那 1w fps 哪个库也做不到。
普通显示 30-60fps 就够了，你肯定要重采样，比如把 min max last avg 质量的算一下，然后 60fps 随便找个库就能做.

mayli

Mar 19, 2025

顺便推荐个库：Dear ImGui
应该性能是够的

jifengg

Mar 19, 2025

我同意 @crysislinux 的建议。不管你是想“一次显示 1 万数据”，还是想“一秒闪烁过一万次数据”都不太现实。想好怎么采样。

jifengg

Mar 19, 2025

额，上面我说的不现实，是想着你要绘制“图表”之类的。
如果不是图表，是一些散列点，那一万个像素还是很简单的。应该主流的绘图库都可以支持

wangtian2020

Mar 19, 2025

塞进 influxdb ，绘图事儿就拜托 influxdb 了

lzyong2019

Mar 19, 2025

cleveryun

Mar 19, 2025

你说的这个波形图，是一条曲线还是多条曲线的，如果条数有限，展示波形图的容器像素本身是有限的，100px 宽度如果是单曲线 1 万个点都塞不了，所以直接把 50w 的点稀释掉数据量就下来了。

另外这个图形本身太简单了，直接 canvas 2d 绘制妥妥的。

cleveryun

Mar 19, 2025

@cleveryun 补充，稀释后的数据量不清楚 echarts 绘制起来卡不卡，你已经用 echart 的可以先试试效果，不行再 canvas 。感觉稀释后 charts 也不会卡，因为数据量不大了。1000px 宽度放 1000 个点（单条曲线的话）。

kinkin666

Mar 19, 2025

大约 1s 有 1w 行，用 echarts ，简单点的话，得重新抽样，不过用 echarts 的话，采样率上不去的，可能要搞个移动平均

高级点，MDN 搜 requestAnimationFrame ，自己用 cavans 画，会按照设备的 fps 来，相当于当页面需要显示下一帧的时候，去看一下最新的数据是啥，然后画上去