请教一个前端设计及实现问题, 绘制并实时更新 96 个折线图的最佳实践?

21 天前
 lurenjiaMAX

程序是这样的:

问题有这些:

目前我选择的是 tauri+vite+react+highchart(highstock).

我调研的每一个绘图库都吹榜他的性能, 包括上面选择的 highstock.

后端性能没有问题, 交互时后端单独发送数据, 前端使用 debounce.

但是性能却非常糟糕.

1703 次点击
所在节点    问与答
34 条回复
lurenjiaMAX
21 天前
@shadowyue 这是把前端的部分摘出来后的测试代码:
https://codesandbox.io/p/devbox/youthful-yalow-hfzycq
msmmbl
21 天前
之前做过 120 个摄像头的缩略图+状态数据,但是不像楼主要秒级的,用的是 websocket ,大概有:
1. 判断哪些图像在浏览器滚动条外面,看不见的不刷新。
2. 一个批次一个批次的请求。比如先一次请求 10 个画面,然后画到页面上,观察用了多久时间,根据时间动态调整下一个批次的数量,尽量让每个预览窗口雨露均沾。
3. 状态用了增量数据,每次只发送上次和这次的改变。
crazyBlack
21 天前
@lurenjiaMAX 这个链接是个空项目,你看看哪里出了问题,上面只渲染当前可见是个好方法,试试 react-window
sampeng
21 天前
所以我特别好奇 grafana 如何做到的。几乎页面不带卡的
lurenjiaMAX
21 天前
lurenjiaMAX
21 天前
@miloooz 是的 我就是用的追加数据. 后面我也试一下 echarts
lurenjiaMAX
21 天前
@chairuosen #9 我是参考 https://www.npmjs.com/package/highcharts-react-official#optimal-way-to-update 这个绘图库提到的最优方式来更新的
okakuyang
21 天前
用 canvas 不是随便画,都是些 2d 的简单东西。而且不需要同屏显示,看到那些就显示那些。
ty29022
21 天前
重采样呗 有啥纠结的
sgiyy
20 天前
@lurenjiaMAX #14 总的需求就是 96 个图表,不过每个图表的数据量不大。
回答你的问题:
1. 数据量不大的话,一个接口发送最好。
2. 流行的图表库一般都没问题,我这边最常用的是 Echarts 。
3. 这种架构没问题

其他:另外一个最需要注意的是图表的数量以及重绘的压力,js 有个 IntersectionObserver 的 API 可以判断元素是否在可视区域,可以封装个 hook ,不在可视范围内就不更新图表,这样页面性能压力会大大减小。
214L
20 天前
我遇到 echarts 等库解决不了的图表性能问题的时候,采用的解决方案是自己写了一个。单纯的 canvas 绘制图表和缩放,更新,交互逻辑,最终表现流畅。
数据量大概是 600 条线,每条 1300 个点?
不过我的图表是我们这个项目的核心模块,所以有时间去打磨。
qping
20 天前
你这么大的图,一屏幕也显示不了几个。后台数据可以接收,但是不用都渲染,监听下 scroll ,只刷新可见区域
ccdjh
20 天前
就是前端的问题。
1 ,你这小数据。强迫症的话,就服务器压缩一下。
2 ,市面上的都可以,根本上应该是 react 和 vue 这些机制是会重刷或遍历一次整个页面,所有会导致性能下降。你前端接收数据,如果坚持使用上面的框架,就局部渲染。
3 ,技术都没错。技术不到位。

实际就是搞个 1 秒心跳一下的客户端。技术压力在前端了。一般会写但不太了解原理的前端导致的。-_- 自己画几个,highchart 钱省了,性能也上来了。就是前端工资价格贵了。
thulof
19 天前
用虚拟列表吧,react-window 了解一下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/1107258

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX