初次接触 web 图表开发的工程师,面对众多的可视化工具库难免会有疑惑,比如说:
这库的产品定位?
哪个更好学?
哪个更强大?
让我们带着问题,从这三个库的命名出发,比较一下:
简述:
该库为百度团队开发,因其开源免费又容易手上,所以很快流行起来。
正如其名 Echarts,亦如其它的 xxCharts 类库一样,该库中封装了绝大多数常规 chart,用户通过配置 options 参数,就可很容易绘制指定图表。
优势:
容易上手:其语法类似 css 的参数配置型语法,学习门槛较低。
图表种类较丰富:因其发布较早且有百度团队维护,其提供的图表类型已能满足绝大部分常规性的业务需求。
劣势:
自由度差:参数配置型语法库的本质是调用现成的绘图函数,所以此类库的通病就是定制化能力差,想做出开发者未封装的图表非常难。
代码复用率低:因为此类库封装程度已非常高,所以很难对其进一步抽象和封装。
产品受众:
无数据可视化知识的前端工程师
简述:
该库由蚂蚁金服 antV 团队开发,其设计理念更有学术性,走出了一条与 echarts 不同的产品线路。
正如其名 The Grammar of Graphics -可视化图形语法,该库有着被称为可视化圣经的《The Grammar of Graphics》作理论支撑,将可视化理论与web技术做了非常好的结合。
优势:
自由度较高:由可视化理论做基础,没有类似 Echart 的 chart 概念,可用“可视化语法”绘制想要的图表,非常灵活。
例如一根堆积柱形图的坐标系由笛卡尔坐标系改为极坐标系,堆积柱形图就变为了圆环图。
代码复用率较高:因其有一套完善的可视化语法,所以团队或公司可根据自己的 UI 需求,用 g2 做底层库,封装自己的 charts 库。
劣势:
学习成本稍高:g2 有理论的加持既是优势也是劣势;优势是更高效了,却也提高了可视化小白的使用门槛。
比如理解 g2 的绘图原理至少要知道数据可视化的五种“视觉通道”:数据可以映射到 position, size, color, shape, opacity 五个维度等等。
产品受众:
数据可视化工程师
希望向数据可视化领域发展的前端工程师
简述:
该库几乎凭 Mike Bostock 一人之力完成,且在学术界、专业团队中享有极大声誉。(想自学 D3 的同学请戳 《如何自学 D3》)
该库更接近底层,与 g2、echarts 不同,d3 能直接操作 svg,所以拥有极大的自由度,几乎可以实现任何 2d 的设计需求。
正如其名 Data Driven Documents,其本质是将数据与 DOM 绑定,并将数据映射至 DOM 属性上(这时视觉通道、比例尺转换等理论就可发挥作用喽~)。
同时,如下图,d3 长于可视化,而不止于可视化,还提供了数据处理、数据分析、DOM 操作等诸多功能。
优势:
掌握 d3 后,限制作品水平的只会是想象力而不再是技术。
劣势:
学习门槛较高,对用户的 web 技术、可视化理论、数学逻辑都一定要求。
产品受众:
希望向中高水平进阶的可视化工程师
希望向中高水平进阶的前端工程师
题外话:
任何一款工具型产品,在产品设计时都遇到“自由度”和“简便性”两者间的权衡与取舍,而往往这两者很难兼得,我将这种情况称之为“跷跷板难题”。
这也是为什么 echarts 使用简单而自由度差, d3 自由度好而学习门槛高的原因了。
所以,回到 “哪个更强大” 的问题,这个问题,从不同角度看,会有不同答案。
在我看来,这三款可视化库各有优劣,没有哪款更强大,只有哪款更适合。
就像美图秀秀与 PhotoShop,分别满足了不同人群,不同场景的需求。
以上