13个可实现超棒数据可视化效果的Javascript框架

随着商业及其相关需求的发展，数据成为越来越重要的元素之一，为了更加直观和明显的展示商业潜在的趋势和内在的特性，我们需要使用图表和图形的方式来直观动态的展示数据内在秘密，在今天的这篇文章中我们推荐12款最棒的数据可视化的Javascript框架，希望能够帮助大家在项目中更好的实现数据可视化效果。

ECharts

提起ECharts，经常使用开源软件的朋友应该很熟悉，当然，如果你不知道也没关系。但是你肯定知道去年春节以及近期央视大规划报道的百度大数据产品，如百度迁徙、百度司南、百度大数据预测等等，这些产品的数据可视化均是通过ECharts来实现的。

ECharts是一款数据可视化的纯JavaScript图标库，其拥有混搭图表、拖拽重计算、制作数据视图、动态类型切换、图例开关、数据区域选择、值域漫游、多维度堆积等非常丰富的功能。

ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

• ECharts在线演示>>>
• ECharts使用文档>>>

Dygraphs.js

Dygraphs是一款允许开发人员创建互动图表的JS类库。数据越多，图表功能越强大。也就是说Dyrgaphs是基于视觉化来包含大量的视图。可以分开的分析和展示数据不同部分，例如指定月份。同时这个类库兼容主要的浏览器，并且支持触摸，使得它成为一个完整健壮的视觉化框架.

• Dygraphs.js Resize演示
• Dygraph.js Options文档

D3.js

最后成为了Protovis.js的继承者，D3能够帮助你通过动态更新DOM来创建令人赞叹的图形。D3.js使用链式方法来创建可视化，并且代码可重用。因为基于DOM，D3支持w3c的web标准，所以能够正确的在web浏览器中正确的渲染。最后，D3的路径生成方法（d3.svg.line()），给予了开发人员通过定义不同路径和属性来创建实用SVG的方法

• Wimbledon Interactive Circle SVG
• D3.js文档

InfoVis

infoVis是Javascript infovis toolkit(JIT)，同样也提供了数据可视化的功能。支持WebGL，infovis被很多的组织例如，Mozilla，Aljazeera认可。和D3框架配合，infovis也提供了链式方法来操作DOM，使得它也成为了一个非常可靠的JS类库。

• President Obama Budget TreeMap
• InfoVis文档

The Google Visualization API

来自Google developers console(GDC)，google的可视化API。除了非常容易使用的DOM修改，这个Google API使得定义定制的方法非常简单。而且界面可用性，及其来自GDC的开源网络支持，使得它也成为了顶级的可视化功能。

• GDC Visualization API Documentation
• Visualization API – Google Spreadsheet – Google Earth API

Springy.js

Spring.js是一个使用特定算法来实现force-directed graphs的Javascript类库，在web页面成类似喷泉样式的节点。虽然它包含了预先定义的算法，我们仍旧可以传入一些参数例如，斜率及其减幅。Springy.js由Dennis Hotson开发。

• Springy.js Node-Drag Demo
• Springy.js GitHub Repo

Polymaps.js

使用SVG来生成互动的web地图，并且兼容浏览器。核心是矢量的片段，帮助确保加载速度和缩放功能。虽然可能需要配置组件，Polymaps很容备定制，能够处理数据为矢量几何，GeoJSON Files及其其它。

• Census Borough Unemployment Map
• Polymaps.js文档 Documentation

Dimple

Dimple API可以帮助分析师不需要了解太多技术内容而开发强大的数据可视化效果，简单的说，Dimple是的任何人都能够开发令人惊叹的三维图形效果，不需要掌握任何的JS知识。 而且dimplejs.org包含了几个超棒的演示，可以很简单的使用用户自己数据来生成效果。如果你不希望了解太深入的JS效果的话，这些例子是你开始使用的必备工具

• Dimple API演示
• Dimple API文档

Sigma.js

如果你需要开发高级特性的线型图，Sigma.js在它的类库和插件中提供了一个超棒的互动设置。使用Sigma.js感觉就想使用一个可靠地类库。然而，Sigma鼓励开发人员去重新的配置类库创建插件，这样导致了大量的开源。 Sigma让人使用非常的舒服，是我个人比较喜欢的用来创建图形效果的Javascript类库

• Sigma.js翻转效果
• Sigma.js文档

Raphael.js

Raphael.js类库专注于浏览器的兼容性。 这个框架遵循了SVG W3C推荐，使用一套标准来保证图片完全缩放并且没有像素损失。除了使用SVG，Rapheal.js在IE9之前使用Vector Model Language（VML）。虽然VML不在广泛使用，这个支持使得Raphael.js拥有最好的兼容性。

• Raphael.js饼图演示
• Raphael.js文档

gRaphaël

虽然Raphael.js是一个用来创建SVG的类库，它并不是用来处理大量数据集的。相反gRaphaë是用来处理这样类型数据的。对于一个10KB数据，gRaphaël被证明是一个非常不错的Raphael扩展。虽然它没有使用forece-driven算法来开发，也没有包含任何物理属性，gRaphaël仍旧是一个在跨SVG结构兼容解决方案中非常值得尊重的类库，而且使用简单。只要对于项目来说它合适，就应该作为完整项目中的一个可行的资源来看待。

• gRaphael.js直线图效果
• gRaphael.js文档

Leaflet

无论开发智能手机，平板或者桌面，Leaflet的Javascript类库绝对是一个互动类库中排名比较高的。 以下是几点原因：由MapBox的创世人Vladimir Agafonkin所领导，整个团队尝试开发简单，高性能，高用户体验的类库。Leaflet通过vector tiles分享渲染SVG的能力。

然而，只有leaflet支持Retina显示。而且能够解析数据形式例如，GeoJSON。

• Leaflet API Manhattan Geolocation
• Leaflet特性

Ember Charts

如果你使用Ember.js，那么来自Addepar Open Source的开发人员创建了一些附属组件来扩展ember的体验：

Ember table，Ember Widget和Ember图表。它使用Ember.js和D3.js来实现，包含了扁平化设计属性。包含了一系列的实用的选项，例如，颜色和尺寸，是的非常简单实现一些令人印象深刻的视觉效果。

• Ember Charts Time-Series Chart
• Ember Charts文档