图表实现基于SVG或Canvas

  • Highcharts 基于SVG,方便自己定制,但图表类型有限。
  • Echarts 基于Canvas,适用于数据量比较大的情况。
  • D3.v3 基于SVG,方便自己定制;D3.v4支持Canvas+SVG,如果计算比较密集,也可以选择用Canvas。

总的来说,所有的第三方库都是基于这两种浏览器图形渲染技术实现的: Canvas 和 SVG 。

在 Canvas 中,如果要为细粒度的元素添加事件处理器,必须涉及到边缘检测算法,无疑为开发带来了一定的难度,同时,采用这种方法并不一定精确。相比之下,SVG 是基于 DOM 操作的,支持更精确的用户交互,无疑更适合我们这样一个小规模的团队。

众所周知,频繁的 DOM 操作十分消耗性能。对于用户体验的影响便是可能出现闪烁、卡顿等现象。幸好,伟大的前端界对于这个问题已经有了解决方案: Virtual DOM 技术。

所以我们要做的,就是选择一个支持 Virtual Dom 技术的框架与 D3.js 结合使用。同时,我们的最终目标是将这些图标封装成可复用的组件。

因此,最终我们选择了 facebook 出品的 React 。这是一个相对轻量、简单、专注于 View 的库。

【前端】大数据时代的图表可视化利器——Highcharts,D3和百度的Echarts

posted @ 2019-06-05 15:53  霓裳依旧  阅读(740)  评论(0编辑  收藏  举报