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文檔

總結

若是你也有一些沒有包含到此篇文章中的Javascript類庫，請給咱們留言。目前的大數據趨勢使得數據可視化成爲將來你們所推崇的一種互動展現模式。若是你早一些瞭解或者掌握相信對於你將來將會很是有幫助！
End.

轉載請註明來自36大數據（36dsj.com)：36大數據 » 13個可實現超棒數據可視化效果的Javascript框架