挑选可视化数据框架

结论

虽然有很多开源图表库,但绝大部分不是已经弃坑就是将要弃坑了,目前真正能用的就只有 ECharts、Ploty.js、Vega 和 G2。

  • Ploty.js、Vega 的维护量和使用量都在减少,样式也比较基础,不太适合商业化使用场景
  • ECharts 和 G2 都是大公司在维护,但是 Echarts 的社区贡献图表和代码提交的活跃度都远高于 G2
    • 在移动端和 PC 端可以使用同一套代码运行,减少维护成本。
    • 一个庞大的图表社区Gallery
    • 独一无二的 Echarts-gl,图表库中唯一的真三维
  • G2 将图表拆分成了很多组成部分,比如数据源、数据转换、坐标系、图形等,通过将它们组装起来实现各种展现效果 Ï,只是简单的图表配置,也可以使用他的上层封装Ant Design Charts

在可见的下一次图形技术变革,只有 WebGPU,但是他对二维图表的影响有限,所以后续应该不会出现更好的前端图表库了

图形需求很通用,难以差异化竞争,所以建议选择 echarts,在特定需求按需引入 G2 即可

图表库详细对比

通过在 github 上筛选 star 数量和最近活跃次数的进行筛选

D3

github contributors

d3‘s contributors

大致介绍

D3 是前端最著名的可视化图表库,有着类似 jQuery 的链式调用,D3 还有鲜明的特点是将功能拆得非常细,做到了函数级别,从数据解析、转换到布局算法都有提供,这使得开发者可以十分灵活地进行组合,实现各种可视化的展现,这使得 D3 非常适合拿来学习的可视化算法,而且还能很方便地将这些算法整合到自己的项目中。
D3 是一款成功的可视化基础设施,它的源码值得学习,但不推荐直接使用它例子开发图表,一方面基于它写的代码上手门槛高,另一方面是它的定位并非图表库,要用的话最好是其它基于 D3 开发的图表库,比如 Ploty.js

Echarts

github contributors

echarts’s contributors

大致介绍

Echarts 是百度商业前端团队基于 Canvas 开发的图表库
ECharts 的配置项相当多,预计超过 600 个,
具有一个非常巨大的社区,如果想配制出漂亮的图表,建议多逛逛 Gallery,可以淘到很多漂亮的效果,只看官方文档是想不到的,
Echarts 其实有不少自己独特的功能,其中最具亮点的就是 Echarts-gl,它能实现三维图表和地球的展示,这点其他开源库基本没有,而其它商业图表都是基于 SVG 的,只能弄仿三维效果,只有 Echarts-gl 是基于 WebGL 做的真三维,可以配置光照、材质、阴影等,还有独家的后期特效功能。
在 WebGL 领域 claygl 是唯一支持延迟渲染的,包括 Three.js(尝试过但放弃了)、Babylon.js、Playcanvas 以及各种你没听说过的 WebGL 引擎都不支持,所以它们都会限制光源数量,比如最多 4 个。

G2/F2

github contributors

大致介绍

基于面向对象的思想进行开发可视化库,是比可直接拿来用的图表库低一层,所以之后开发了更加简单易用的 G2Plot 专注于普通图表的绘制。

单独为移动端封装了 F2,做了更好的适配。
值得一提的是 AntV 团队还弄了很多方向,比如关系图 G6/X6、地图 L7、自动选图 AVA 等,但这些项目大多只有一个人,团队精力可能有点分散了。

其它开源图表库

开源图表库还有很多 Star 数量比较高的,这里简单汇总一下:

  • Highcharts ,作为一个商业公司,有十来个人进行持续的更新迭代
  • TOAST UI Chart 是韩国 NHN 公司搞的,贡献者比较少,感觉快要弃坑了,大公司里的非主业项目经常这样,表示理解。
  • Chartist.js 别看它有 12.2k 的 Star,看提交历史肯定弃坑了,3 年只提交了 20 次。
  • Frappe Charts 代码只有 3.5k 行,最近提交很少且文档很简陋,13.4k Star 说明他们的推广策略很厉害,也是个值得学的案例。
  • Raphael 特别古老的前端图形库,2008 年就有了,不少图表库的底层基于它,它自己也有个 g.Raphaël 图表库,不过只开发了两年就停了,可能是作者在 Adobe 忙别的事情去了,比如折腾过 Snap.svg,但也弃坑了。
  • vis.js 主要是绘制关系图的,曾经有段时间弃坑过,不过最近还有少量更新,类似的还有 dagreGoJSDraw2D
  • TradingView 专注做股票类的,似乎很专业,有不少分析 k 线的小工具。
  • uPlot 以体积小巧作为主要优点,然而体积小只是因为功能少,2k 多行代码做不了啥,所以它的配置项和交互都很少。
  • Chartkick.js 将 Chart.js、Google Charts 和 Highcharts 的接口封装起来,提供一套更简单的 API,一方面是更简单,另一方面是万一其中某个挂掉了可以直接换别的,然而这也意味着它的功能非常有限,毕竟是取交集。
  • 另外还有些 gis 领域的专用可视化库,比如 cesiumdeck.gl,但国内对测绘是有规定的,最好直接用百度、高德。