Canvas实现高性能的瀑布图

最新推荐文章于 2024-04-09 18:03:12 发布

原创

最新推荐文章于 2024-04-09 18:03:12 发布 · 2.7k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #数据可视化

本文详细描述了一个前端项目中如何使用WebSocket实现实时数据传输，以及如何利用HighCharts和Canvas绘制频谱图和瀑布图。着重讲解了组件拆分、性能优化策略和数据渲染方法，展示了动态更新和缩放功能的实现过程。

废话不多说，先上成品图：

频谱图+瀑布图

再来个迷你动图：

频谱图+瀑布图动图

可能很多同学不知道频谱图和瀑布图，其实我也不懂…但是咱们前端就是负责把数据按照规则显示出来就好（上方折线图为频谱图，下方那一坨为瀑布图）。

技术选型

框架：Vue(这并不重要，反正我也不会多说这块)

数据传输：WebSocket

频谱图：HighCharts

瀑布图：Canvas

为什么使用 WebSocket ？

因为需要服务器实时传输数据，要求达到30帧，每帧动画由 1024 个点组成，肯定要比 Ajax 轮询舒服的多，而且这个项目对于浏览器兼容没什么要求。

为什么使用 HighCharts 绘制频谱图?

做了个测试，HighCharts 与 ECharts，虽然说 canvas 的性能要比 svg 强，但同时渲染觉得 HighCharts 更加流畅（HighCharts 需要付费）。

瀑布图为什么使用 Canvas ？

虽然说用数据可视化图表库很方便，但是考虑到此项目苛刻的性能要求，使用类似瀑布图的只有大型热力图：

大型热力图

用热力图做，请放心，不会卡成 PPT，浏览器5秒后准时直接崩溃。

组件功能拆分

整个组件拆分为三部分：

父组件：负责 WebSocket 与服务器实时通讯、处理二进制数据、控制渲染频率、控制开始和暂停、刷新组件。
子组件 > 频谱图(HighCharts)：提供 addData 方法，获取数据即渲染一帧，提供触发缩放事件，发送给父组件。
子组件 > 瀑布图(Canvas)：与频谱图一样提供 addData 方法，频谱图发生缩放事件后，对应其选取的位置进行缩放。

父组件

WebSocket 链接服务器

因为操作并不是很多，直接使用原生方式：

this.socket = new WebSocket('ws://192.168.2.250:8100/socket')
this.socket.onopen = () => {
   
   ...}
this.socket.onclose = () => {
   
   ...}

与后端对接好发送的指令，这里我们定义了三个：

// 开始获取数据
this.socket.send('start')
// 暂停获取数据
this.socket.send('pause')
// 恢复获取数据
this.socket.send('resume')

监听 onmessage 事件：

this.socket.onmessage = (event) => {
   
   
  const reader = new FileReader()
  reader.readAsArrayBuffer(event.data)
  reader.onload = e => {
   
   
    if (e.target.readyState === FileReader.DONE) {
   
   
      // 处理二进制数据
    }
  }