如何解决在平移期间加载数据时,highstock 的性能滞后
我们在我们的服务中显示了一个高库存图表,其中显示了一些密集数据(每秒可能有多个值)。 为了避免为大时间范围加载过多数据,我们在服务器端集成了聚合。
我们集成了在用户放大时重新加载特定时间范围的逻辑,用加载的(和更详细的)数据替换原始聚合数据。 缩放和替换效果很好。
现在我们要添加动态数据加载,当用户向每一侧平移/滚动时。 在这里,我们遇到了图表的主要滞后/性能问题。
示例:
- 用户为 4 个系列选择了 2 天的时间范围
- 数据在服务器端聚合为每小时平均值并显示在图表中
- 然后用户放大到 1 小时以内的时间范围
- 原始数据(每秒可能有多个值)显示在图表中(每边都有一点缓冲区用于平移)
- 现在用户将图表平移到左侧以查找在缩放时间跨度之前发生的情况
- 在用户到达缩放数据结束点之前,需要预加载原始数据并将其添加到每个系列中
技术配置:
- 启用鼠标跟踪和悬停在单点上(用户需要这种洞察力)
- 平移已启用
- 导航器从未显示在此图表上
- 动画被禁用
- 为了触发数据加载,组件监听afterSetExtremes事件(当数据加载被触发时,下一个事件触发器被忽略,直到数据加载并放入图表)
- 图表重绘仅在最后一个系列更新后触发
- 所有数据加载都是异步处理的
- setData 上的更新点无法使用,因为数据数组的长度发生了变化
我们使用打字稿来构建有角度的前端。为此,我们使用 highcarts 8.2.2 和 highcarts-angular 2.7.0 在显示图表的组件中 Highstock 是从 'highcharts/highstock' 导入的
这是我在平移期间从性能选项卡截取的屏幕截图。我已经标记了完成实际数据加载的部分。注意它之前和之后的多次重绘(我猜对于每个像素图表被移动/平移到一边)
screenshot of perfromance tab - panning a few seconds to one side
screenshot of perfromance tab - zoom in to the one afterSetExtremes triggering data load
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。