性能优化 - 前端如何绘制能容纳亿级别的折线图？

Question

前端如何绘制能容纳亿级别的折线图？
项目需要绘制一个折线图，这个折线图要容纳亿级数据量，并且是实时更新的，就是这个统计图一直在绘画，每秒都在更新，然后并且能支持查看很久之前的统计图，比如说我点到之前的某个点，这个点就会放大，以前的数据不删除。

已经使用的方式是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这种方法只能单个点加载
这样的话，历史数据加载百万级是没有问题的，但是实时渲染到几千个点就不行了，只能坚持几分钟浏览器已经卡的不能动了，
要求是能看最近几天的数据

现在的难点在于如何实时更新，这个统计图数据量很大的这种

Answer 1

1.highcharts默认开启数据聚合(plotOptions.series.dataGrouping.enabled = true),在开启dataGrouping的情况下，折线图上展示的数据就是采样数据。
2.highcharts line图 支持scrollbar，可以实现图的缩放(印象里highcharts不支持点击放大)。

dataGrouping + scrollbar应该能够满足题主的需求。单图的点上亿，这个数据量highcharts性能能不能支持，这个不确定。如果highcharts支持不了，建议改交互，把时间区间分开，在数据层面实现大量数据的拆分。

Answer 2

应该是前后拖动的时候，动态修改数据项吧？
不知道dataZoom跟你的需求对不对得上。

Answer 3

看得见的部分用采样技术减小数据量，看不见的部分用类似虚拟列表的技术隐藏。数据保存可以用数据库（IndexDB）

参考：后端一次传过来2000万条数据,前端怎么处理?