D3js
前端可视化领域当之无愧的 No.1,提供的 API 相对基础,相对灵活度最好,适合完成定制化有较高要求的图形。
网上的参考资料很多,摘录两个:
封装 D3js,以提供更易用的 API 的库也很多:
期中 Recharts 是基于 React 的组合式图表,有官方中文文档。
设计比较简约,可满足一般数据可视化需要。
Chart.js
官方介绍:
为设计和开发人员准备的简单、灵活的 JavaScript 图表工具
相比其他可视化库,其使用可能最为简单、轻量。目前中文文档翻译完成度较低。
Echarts
基于 React 封装库有 echarts-for-react,其只是体统了一个简单的封装组件,使用中仍按照 Echarts 的 API 来完成数据可视化。
基于 Vue2.x 封装的有v-charts,其封装度更高。
AntV
蚂蚁金服开源的数据可视化解决方案,包含:
- G2: 一般的数据可视化
- G6: 关系数据可视化
- F2: 专注移动端的数据可视化解决方案
一般我们用到最多的是 AntV/G2
,相比 Echarts 算是后起之秀,官方介绍为:
G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。
与 Echarts 相比,因为其封装了一些细节,使用上可能相对简单,但是没有 Echarts 那么高的可定制度,相对图形做细微定制化调整,按照官方的 API 可能让人摸不着头脑。而自 Echarts V4 版本,也加入了 数据集(dataset)
等功能,减少了代码繁琐度,相比来说可能 Echarts 更好用一些。就系统化解决方案来说,因AntV
包含各端以及覆盖 React
、Vue
、Angular
的官方封装,会更胜一筹。就主题配色来啊,个人感觉 AntV
提供的默认主题更好看一点,若你是颜控,不妨试试 AntV/G2
。
G2
和 G6
有基于其的 React 封装库:
- BizCharts: 一个基于 G2 封装的 React 图表库,具有 G2、React 的全部优点,可以让用户以组件的形式组合出无数种图表;并且集成了大量的统计工具,支持多种坐标系绘制,交互定制,动画定制以及图形定制等等。
- BizGoblin: 一个基于 F2 封装的 React 图表库,具有 F2、React 的全部优点,可以让用户以组件的形式组合出无数种移动端图表。
不过如果不研究 G2
文档,直接上手 BizCharts
是个大坑……
Highcharts
另一个比较流行的数据可视化框架,有中文文档,网上和 Echarts 对比的文章较多,可自行查阅。有些方面比 Echarts 更强大易用。不过其商用授权费用大部分国内公司会望而却步,单个开发者授权为7900元
。