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

AnyChart

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

amCharts

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

Cesium

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

Chart.js

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

Chartist.js

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

D3

2011年，Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 釋出了 D3，它是目前 Web 端評價最高的 Javascript 視覺化工具庫。D3 能夠向用戶提供大量線性圖和條形圖之外的複雜圖表樣式，例如 Voronoi 圖、樹形圖、圓形叢集和單詞雲等等。它的優點是例項豐富，易於實現除錯資料同時能夠通過擴充套件實現任何想到的資料視覺化效果，缺點是學習門檻比較高。與 jQuery 類似，D3 直接對 DOM 進行操作，這是它與其它視覺化工具的主要區別所在：它會設定單獨的物件以及功能集，並通過標準 API 進行 DOM 呼叫。

echarts

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

Flot

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

FusionCharts Free

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

Google Chart

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

HighCharts

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

Leaflet

Leaflet 是一個可以同時良好運行於桌面和移動端的 Javascript 可互動地相簿。它使用 OpenStreetMap 的資料，並把視覺化資料集中在一起。Leaflet 庫的核心庫很小，但由豐富的外掛可以大幅拓展其功能，常常被用於需要展示地理位置的專案。

MetricsGraphics

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

Sigma.js

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