数据可视化图表框架归纳

Posted 2021-04-02 小新的前端之路

1.D3.js( 推荐)

D3.js 是一个javascript库，它可以通过数据来操作文档。D3可以通过使用html、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。

 

评价 ：d3js是所有列出来的这些框架里面数据可视化展示功能最强大的，尤其适合大数据量的展示和交互式动态效果的渲染。是一个很强大的框架，网上的资料也比较多，但是因为强大，上手相对于其他框架比较困难。在github上有源码和api手册，尤其是有中文文档和中文学习网站。

 

2.Bonsaijs

一个轻量级的免费开源的javascript图形库，可以方便地创建图形很动画。这个类库使用SVG作为输出方式来生成图形和动画效果，拥有非常完整的图形处理API，可以使得你更加方便的处理图形效果。

 

评价 ：图形api的接口js,理论上应该能实现很多效果。根据官网demo中的效果来看，pie Chart和Blobs效果还是很不错的，尤其Blobs做得很炫。并不完全建议用此框架来实现数据可视化，但是可以作为一个有力的补充框架。

另外，网站上文档比较全面，写得也很易懂，易用性比较强，上手容易。

 

3.Gephi

Gephi 是一款开源免费跨平台基于JVM的复杂网络分析软件, 其主要用于各种网络和复杂系统，动态和分层图的交互可视化与探测开源工具。可用作：探索性数据分析，链接分析，社交网络分析，生物网络分析等。

Gephi 是一款信息数据可视化利器

Gephi 可以供大学研究项目数据分析使用，新闻工作者，统计研究，微博信息研究等。

Gephi 是在Netbeans平台上开发，语言是JAVA，并且使用OpenGL作为它的可视化引擎。依赖于它的APIs，开发者可以编写自己感兴趣的插件，创建新的功能。

开发者对它寄予的希望是：成为 “数据可视化领域的Photoshop” 。

评价 ：看着也是很酷的一个工具，能实现一些很炫的效果，但是粗略看了一下，并不是一个前端工具，好像也是需要另外的后端支持的。可能并不适合用于页面开发，但是毋庸置疑是一个好的可视化工具。

 

4.arborjs

Arbor.js 是一个利用web workers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。这个框架并没有强制使用哪一种方法来绘制屏幕，你可以使用Canvas、SVG、甚至是HTML的位置元素。

 

评价：上面的一张图很具有代表性，这样的网状图是arborjs擅长的，实际操作了一下性能也是可以接受的，看了一下基本上这个js框架的示例都是上面这样的网状图。对其他的饼状图或者更复杂的图像可能并不擅长。

 

5.HighCharts

Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

 

评价 ：商业用途需要授权，有大量的图形模板可以参考，基本上能涵盖常用的曲线图等图表，但是对于数据之间的联系和交互式的展示上不如d3这些专用的数据可视化框架。教程和资料较多，如果够用的前提下，可能highcharts更能好上手，用起来更方便一些。

 

6.ECharts （推荐）

ECharts ，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

    ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

评价 ： ECharts 是百度团队开源的JS框架，只要加上版权申明之后可以免费使用。从效果看，比HighCharts要炫一些，支持各种图标，对大数据需要用到的关系图支持的也比较好。不过ECharts本身也不是专用于数据可视化的，专业性可能不如D3这样的框架，需要评估。