前端如何绘制能容纳亿级别的折线图?-灵析社区

M78的社畜

前端如何绘制能容纳亿级别的折线图? 项目需要绘制一个折线图,这个折线图要容纳亿级数据量,并且是实时更新的,就是这个统计图一直在绘画,每秒都在更新,然后并且能支持查看很久之前的统计图,比如说我点到之前的某个点,这个点就会放大,以前的数据不删除。 已经使用的方式是highcharts,引入, import Boost from "highcharts/modules/boost.js"; import highstock from 'highcharts/modules/stock.js' highstock(Highcharts) Boost(Highcharts); 实时更新是使用 series.addPoint([x, y], true, false, false); 数据是批量过来的,通过websocked, highcharts好像没有addPoints这种方法只能单个点加载 这样的话,历史数据加载百万级是没有问题的,但是实时渲染到几千个点就不行了,只能坚持几分钟浏览器已经卡的不能动了, 要求是能看最近几天的数据 现在的难点在于如何实时更新,这个统计图数据量很大的这种

阅读量:126

点赞量:0

问AI
看得见的部分用采样技术减小数据量,看不见的部分用类似虚拟列表的技术隐藏。数据保存可以用数据库("IndexDB" (https://link.segmentfault.com/?enc=ZmGbll5KOMrzJHZKb9FFQA%3D%3D.OR%2Fi1%2FtBFbKkzaCFKa7jeHTkq3QTqJQyIF%2F7ATGH58HCVUsqdxaFD%2B99we8CLX7cO3QDSSG2o40cv2L0Dq4zJBVFirWdRwoPHVZlbGUI77w%3D)) 参考:"后端一次传过来2000万条数据,前端怎么处理?" (https://segmentfault.com/q/1010000045056858)