推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 254 天前的主题，其中的信息可能已经有所发展或是发生改变。
背景
我正在开发一个上位机的工具，是用 tcp 进行连接的。连接完了之后我会接收到数据，格式如下:
demo:>1,2,3 demo:>5,6,7 我需要对上面的数据进行解析组成每个通道的数据(通道由每一列元素)，如上所示就是有 3 个通道[1,5], [2,6], [3,7]。 然后需要实时的绘图，最大的问题是，这个连接数返回的数据很大约 1s 有 1w 行的数据量。我要怎么进行一个比较好的数据绘图呢。
第 1 条附言 253 天前
就是波形图，连接之后的数据流，一直在绘制。我想过最大的容量是每个通道 50W 个点，然后用一个双端队列来存储我的数据。但是我用 echart 来绘制 感觉太卡顿了
 | 1 liuhuihao 254 天前 具体是要绘制成什么样子呢？三个柱状图，每个柱状图表示每个通道数据的数据和？ 6 ，8 ，10 这样？ |
 | 2 crysislinux 254 天前 via Android  1 你需要先找一个合适的采样算法，屏幕上肯定不可能全部去画的 |
 | 3 UnluckyNinja 254 天前 via Android 数据正常更新，绘图时 raf debounce 就行了，高频低频对接基本都是这个策略 |
 | 4 fenglayting 253 天前 使用 canvas 绘制图片，每次重新绘制图片，使用 webworker 加 WebSocket 推送，数据比较大需要后端压缩，前端解压；一秒一次很慢了。。 |
 | 5 UB 253 天前 可以试试 [scichart]( https://www.scichart.com/Javascript-chart-features/) |
 | 6 mayli 253 天前 这个连接数返回的数据很大约 1s 有 1w 行的数据量 这个 1w 行是每行刷新绘制一次？那 1w fps 哪个库也做不到。 普通显示 30-60fps 就够了，你肯定要重采样，比如把 min max last avg 质量的算一下，然后 60fps 随便找个库就能做. |
| 7 mayli 253 天前 顺便推荐个库：Dear ImGui 应该性能是够的 |
 | 8 jifengg 253 天前 我同意 @crysislinux 的建议。不管你是想“一次显示 1 万数据”，还是想“一秒闪烁过一万次数据”都不太现实。想好怎么采样。 |
| 9 jifengg 253 天前 额，上面我说的不现实，是想着你要绘制“图表”之类的。 如果不是图表，是一些散列点，那一万个像素还是很简单的。应该主流的绘图库都可以支持 |
 | 10 wangtian2020 253 天前 塞进 influxdb ，绘图事儿就拜托 influxdb 了 |
 | 11 lzyong2019 OP 就是波形图，连接之后的数据流，一直在绘制。我想过最大的容量是每个通道 50W 个点，然后用一个双端队列来存储我的数据。但是我用 echart 来绘制 感觉太卡顿了 |
 | 12 cleveryun 253 天前 你说的这个波形图，是一条曲线还是多条曲线的，如果条数有限，展示波形图的容器像素本身是有限的，100px 宽度如果是单曲线 1 万个点都塞不了，所以直接把 50w 的点稀释掉数据量就下来了。 另外这个图形本身太简单了，直接 canvas 2d 绘制妥妥的。 |
| 13 cleveryun 253 天前 @cleveryun 补充，稀释后的数据量不清楚 echarts 绘制起来卡不卡，你已经用 echart 的可以先试试效果，不行再 canvas 。感觉稀释后 charts 也不会卡，因为数据量不大了。1000px 宽度放 1000 个点（单条曲线的话）。 |
 | 14 kinkin666 253 天前 大约 1s 有 1w 行，用 echarts ，简单点的话，得重新抽样，不过用 echarts 的话，采样率上不去的，可能要搞个移动平均 高级点，MDN 搜 requestAnimationFrame ，自己用 cavans 画，会按照设备的 fps 来，相当于当页面需要显示下一帧的时候，去看一下最新的数据是啥，然后画上去 |
 | 15 Opportunity 253 天前 这个数据量 plotly 应该还能 hold 的住 |
 | 17 zwenlun 253 天前 lightweight-charts 用起来挺舒服的 |
 | 18 pigpigxia 253 天前 等后续，之前在笔记本上用 echarts 渲染上万个数据点的图就卡，更别说按照成千上万的 FPS 来更新，重采样可能是唯一解。 |
 | 19 okakuyang 253 天前 根本没戏，瓶颈在你解析数据这一块而不是在绘制这一块。 |
 | 20 ilylx2008 253 天前 没必要展示所有的数据，想方法去掉一部分。我画过 1 秒几千个的动态散点图，echarts 没问题 |
 | 21 thevita 253 天前 用 C++ 写, 使用 imGUI 这样的 Immediate Mode 方式绘制, 然后编译到 wasm/webgl |
 | 23 ttyUSB0 252 天前 以前用的 HighCharts ，有个 boost 组件，启用后能渲染大量数据 |
Select Language