14款基於javascript的數據可視化工具

俗話說,一圖勝千言。圖形化的信息可以讓人們對數據有更加直觀清晰的理解,讓信息發佈者更加高效地展示自己的核心內容。在前端開發中,如果缺少合適工具,製作數據可視化圖表會十分複雜。然而隨著數據可視化概念逐年火熱,有較多優秀的圖表開源庫和製作工具脫穎而出。下面,我們就拿其中比較有名的 14個產品進行簡要介紹。

AnyChart

鏈接:http://www.anychart.com/

AnyChart 是基於 Flash/JavaScript(HTML5) 的圖表解決方案,它可以輕鬆地跨瀏覽器、跨平臺工作。除了基礎的圖表功能外,它還有收費的交互式圖表和儀表功能。它可以通過 XML 格式獲取數據,該方式讓開發人員非常靈活地控制圖表上的每一個數據點,而當圖表數據點數量偏大時,則可以採用 CSV 數據輸入,減小數據文件大小和圖表加載時間。

amCharts

鏈接:http://www.amcharts.com/

amCharts 是一款高級圖表庫,致力於對 Web 上的數據可視化提供支持。它所支持的圖表包括柱狀圖、條狀圖、線圖、蠟燭圖、餅圖、雷達、極坐標圖、散點圖、燃燒圖和金字塔圖等等。amCharts 庫是一款完全獨立的類庫,在應用中不依賴任何其他第三方類庫,就可直接編譯運行。除了提供最基本的規範要素外,amCharts 還提供了交互特性。用戶在瀏覽基於 amCharts 製作的圖表時,用鼠標 hover 圖表內容,可以與其進行交互,使圖表展示細節信息,其中呈現信息的容器被叫做 Balloon(氣球)。除此之外圖表可以動態動畫的形式被繪製出來,帶來了了非常好的展示效果。

Cesium

鏈接:http://cesiumjs.org/

Cesium 同樣專注於地理數據可視化,它是一個 Javascript 庫,可以在 Web 瀏覽器中繪製 3D/2D 地球。無需任何插件即可基於 WebGL 來進行硬件加速。除此之外,它還有跨平臺、跨瀏覽器的特性。Cesium 本身基於 Apache 開源協議,支持商業及非商業項目。

Chart.js

鏈接:http://www.chartjs.org/

Chart.js 是一個簡單、面向對象,為設計和開發者準備的圖表繪製工具庫。它提供了六種基礎圖表類型。基於 Html5,響應式,支持所有現代瀏覽器。同時它不依賴任何外部工具庫,本身輕量級,且支持模塊化,即開發者可以拆分 Chart.js 僅引入自己需要的部分進入工程。在小巧的身段中它同時支持可交互圖表。

Chartist.js

鏈接:https://gionkunz.github.io/chartist-js/

Chartist.js 是一個非常簡單而且實用的 JavaScript 圖表生成工具,它支持 SVG 格式,圖表數據轉換靈活,同時也支持多種圖表展現形式。在工程中,Chartist.js 的 CSS 和 JavaScript 分離,因此代碼比較簡潔,在應用時配置流程十分簡單。它生成的是響應式圖表,可以自動支持不同的瀏覽器尺寸和分辨率,更多的是,它也支持自定義 SASS 架構。

D3

鏈接:http://vis.stanford.edu/papers/d3

2011年,Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 發佈了 D3,它是目前 Web 端評價最高的 Javascript 可視化工具庫。D3 能夠向用戶提供大量線性圖和條形圖之外的複雜圖表樣式,例如 Voronoi 圖、樹形圖、圓形集群和單詞雲等等。它的優點是實例豐富,易於實現調試數據同時能夠通過擴展實現任何想到的數據可視化效果,缺點是學習門檻比較高。與 jQuery 類似,D3 直接對 DOM 進行操作,這是它與其它可視化工具的主要區別所在:它會設置單獨的對象以及功能集,並通過標準 API 進行 DOM 調用。

echarts

鏈接:http://echarts.baidu.com/

一款免費開源的數據可視化產品,給用戶提供直觀、生動、可交互和可個性化定製的數據可視化圖表。Echarts 上手簡單。其具有的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗,幫助用戶在對數據挖掘、整合時大幅提高效率。同時,Echarts 提供了豐富的圖表類型,除了常見的折柱餅,還支持地圖、力導向圖、treemap、熱力圖、樹圖等等。更驚豔的是,它還支持任意維度的堆積和多圖表混合展現。總而言之,這是一款讓我們非常驚喜的可視化產品,非常強大,不過他圖表不是很美觀,對移動端的支持也還有些欠缺,不過這些問題在官方最新發佈的3.0beta中得到了很大改善

Flot

鏈接:http://www.flotcharts.org/

Flot 是一個純 Javascript 繪圖庫,作為 jQuery 的插件使用。它可以較為輕鬆地跨瀏覽器工作,甚至包括 IE6。因為 jQuery 的特性,開發者可以全面地控制圖表的動畫、交互,把數據的呈現過程優化得更加完美。

FusionCharts Free

鏈接:http://www.fusioncharts.com/

FusionCharts Free 是可跨平臺、跨瀏覽器的 Flash 圖表解決方案,它能夠被 ASP、.NET、PHP、JSP、ColdFusion、Ruby on Rails、簡單 HTML 頁面甚至 PPT 調用。在使用過程中,用戶原則上並不需要知道任何 Flash 的知識,只需要瞭解你所用的編程語言,並進行簡單的調用即可以實現應用

Google Chart

鏈接:http://developers.google.com/chart/

不需要多介紹,大家都非常瞭解的可視化工具

HighCharts

鏈接:http://www.highcharts.com/

HighCharts 是一個界面美觀,時下非常流行的的純 Javascript 圖表庫。它實際上由兩部分組成:HighCharts 和 Highstock。其中 HighCharts 能夠很便捷地在 Web 網站或是 Web 應用程序中添加可交互圖表,並可免費用於個人學習、個人網站和其他非商業用途。目前 HighCharts 支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散點圖和一些綜合圖表。而 HighStock 可以為用戶方便地建立股票或一般的時間軸圖表。它提供先進的導航選項,預設的日期範圍,日期選擇器,滾動和平移等公盟。

Leaflet

鏈接:http://leafletjs.com/

Leaflet 是一個可以同時良好運行於桌面和移動端的 Javascript 可交互地圖庫。它使用 OpenStreetMap 的數據,並把可視化數據集中在一起。Leaflet 庫的內核庫很小,但由豐富的插件可以大幅拓展其功能,常常被用於需要展示地理位置的項目。

MetricsGraphics

鏈接:http://metricsgraphicsjs.org/

MetricsGraphics.js 是一個基於 D3,為可視化和時間序列化的數據而優化的庫。它提供了一種便捷的方法,用一致且響應式方式來產生相同類型的圖形。它現在支持折線圖、散點圖、直方圖、地毯圖和基本的線性回歸圖。同時,它體積非常小巧,通常可以控制在 60kb 之內。

Sigma.js

鏈接:http://sigmajs.org/

Sigma.js 是一個專注於圖形繪製的 Javascript 庫,它可以讓開發者輕鬆地在自己的 Web 應用中發佈網絡圖。它給提供了很多設置項,使開發者可以自由地定義網絡圖的繪製方式。同時其也提供了豐富的 API,例如移動視圖、刷新渲染、事件監聽等等都可以輕易實現,這讓開發者可以在交互上進行更多拓展。