Blog

可视化实现方案

time: 2020.8.16
author: heyunjiang

背景

  1. 对 canvas 理解不到位，不知道 canvas2d, webgl 啥关系
  2. 对于可视化实现方案没有系统认知
  3. 对于 canvas2d 使用场景不知道
  4. 之前业务实现甘特图不知道支持数据体量如何衡量

可视化4种实现方案

  1. html+css：不建议使用，因为他们是用于网页基本实现
  2. svg：可以实现少量、简单的图形可视化，会走浏览器渲染引擎的构建 dom tree、样式计算、render tree、layer tree、分层等，如果数据量大会有性能瓶颈
  3. canvas2d：掉用浏览器提供的图形指令生成 api，直接走的是生成绘制指令、gpu渲染图形步骤，在处理最多万级数据显示时，性能较好
  4. webgl：属于 canvas 3d 可视化实现，同 canvas2d 一样，也是直接生成绘制指令，不过它的 api 更加底层，对 gpu 的操作更加灵活，对于出于十万+数据性能更好，因为开发者可用直接对 gpu 绘制做优化，比如并行计算等