样式
和 图表基础数据
合并成预渲染数据 renderData
。WebWorker
实现计算和渲染过程并行处理,进一步优化图表响应速度:HitCanvas
,将正常的 SceneCanvas
上的元素按照原有位置摆放好,但是给每一个元素都设置了不同的颜色。点击的时候,通过点击事件获取到对应颜色,即可找到对应元素。HitCanvas
实现事件机制。这种模式的优点在于实现、理解起来简单,但效率较数学计算低,因为增加了一次渲染。这也是为什么 Konva 在官方文档的 优化方案 中提到,对于不需要事件响应的元素可以通过 listening(false)
不将其加入 HitCanvas
以提高渲染效率。G.js(分片渲染)
和 ECharts(渐进式图表)
中都实现类似的渲染机制分拆大数据量下的渲染任务,在 G.js 中对数据的分拆 与 局部渲染结合到了一起:ctx.clearRect(x, y, width, height)
擦除区域内的像素点ctx.fillRect(x, y, width, height)
对执行区域进行绘制WebGL
提供基于三维空间的数据展示,一定能更有效的展现出信息之间的关联关系。提供更好的展示效果,任重而道远。