求前端高频数据绘图库

[lzyong2019]

背景

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

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

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

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

[liuhuihao]

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

[crysislinux]

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

[UnluckyNinja]

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

[fenglayting]

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

[3085570450tt]

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

[mayli]

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

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

[mayli]

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

[jifengg]

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

[jifengg]

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

[wangtian2020]

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

[lzyong2019]

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

[cleveryun]

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

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

[cleveryun]

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

[kinkin666]

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

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

[Opportunity]

这个数据量 plotly 应该还能 hold 的住

[kinkin666]

@kinkin666 觉得按 fps 的频率太琐碎的话，可以 throttle 一下，比如 10ms 搞一搞

[zwenlun]

lightweight-charts
用起来挺舒服的

[pigpigxia]

等后续，之前在笔记本上用 echarts 渲染上万个数据点的图就卡，更别说按照成千上万的 FPS 来更新，重采样可能是唯一解。

[okakuyang]

根本没戏，瓶颈在你解析数据这一块而不是在绘制这一块。

[ilylx2008]

没必要展示所有的数据，想方法去掉一部分。我画过 1 秒几千个的动态散点图，echarts 没问题

[thevita]

用 C++ 写, 使用 imGUI 这样的 Immediate Mode 方式绘制, 然后编译到 wasm/webgl