周邊花絮.js.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（https://gionkunz.github.io/chartist-js/ ）
Chartist.js 是一個很是簡單並且實用的 JavaScript 圖表生成工具，它支持 SVG 格式，圖表數據轉換靈活，同時也支持多種圖表展示形式。在工程中，Chartist.js 的 CSS 和 JavaScript 分離，所以代碼比較簡潔，在應用時配置流程十分簡單。它生成的是響應式圖表，能夠自動支持不一樣的瀏覽器尺寸和分辨率，更多的是，它也支持自定義 SASS 架構。

D3.js（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.0 beta中獲得了很大改善。

Flot（http://www.flotcharts.org/ ）
Flot 是一個純 Javascript 繪圖庫，做爲 jQuery 的插件使用。它能夠較爲輕鬆地跨瀏覽器工做，甚至包括 IE6。由於 jQuery 的特性，開發者能夠全面地控制圖表的動畫、交互，把數據的呈現過程優化得更加完美。

FusionCharts（http://www.fusioncharts.com/ ）
FusionCharts Free 是可跨平臺、跨瀏覽器的 Flash 圖表解決方案，它可以被 ASP、.NET、PHP、JSP、ColdFusion、Ruby on Rails、簡單 HTML 頁面甚至 PPT 調用。在使用過程當中，用戶原則上並不須要知道任何 Flash 的知識，只須要了解你所用的編程語言，並進行簡單的調用便可以實現應用。

Google Charts (https://developers.google.com/chart/)
有沒有必要過多的介紹這裏谷歌圖表。 我相信大多數讀者都熟悉這個工具，它是功能強大，易於使用，並且免費。

HighCharts（ http://www.highcharts.com ）
HighCharts是一個流行的JavaScript圖表庫。 它提供了一個簡單易用的方式，以互動的圖表（S）添加到您的網站或Web應用程序。 輸出在現代瀏覽器和VML在Internet Explorer中使用SVG渲染。 圖表精美動畫眼簾自動，該框架還支持實時數據流。 更重要的是，它是免費下載和使用非商業（以及可受權用於商業用途）。 目前，它支持線，樣條曲線，面積，areaspline，柱形圖，條形圖，餅圖，散點圖，角規，arearange，areasplinerange，columnrange，氣泡，箱形圖，偏差線，漏斗，瀑布和極地圖表類型。

Leaflet (http://leafletjs.com/ )
Leaflet是一個開源的JavaScript庫，在全部主要的桌面和移動平臺的做品。 單張使得它易於使用OpenStreetMap的數據，並在HTML5 / CSS3包裝徹底集成交互式數據可視化。 這是很是輕（僅爲33KB），並有不少的功能做出任何種類的地圖。 所以，經常被用於須要展現地理位置的項目。

MetricsGraphics（ http://metricsgraphicsjs.org/ ）
MetricsGraphics.js 是一個基於 D3，爲可視化和時間序列化的數據而優化的庫。它提供了一種便捷的方法，用一致且響應式方式來產生相同類型的圖形。它如今支持折線圖、散點圖、直方圖、地毯圖和基本的線性迴歸圖。同時，它體積很是小巧，一般能夠控制在 60kb 以內。

Sigma.js（ http://sigmajs.org ） Sigma.js是一個JavaScript庫，這是專門爲使用HTML5 canvas元素繪製圖表。 這使得輕鬆地發佈在網頁上網絡，並容許開發人員在富Web應用程序的網絡整合的探索。 西格瑪提供了不少不一樣的設置來輕鬆地自定義繪圖的方式。 此外，公共的API，開發人員能夠擴大如何與網絡交互的可能性越大（如修改數據，移動相機，刷新渲染，監聽事件）。