21 個最棒最有用的 JavaScript 圖表庫

每個企業在做重要決定時都傾向於做資料分析。實際上他們很多時候都是沉淪在資料裡頭，不知道如何跳出其中。隨著大資料的到來，曾經好用的表格和圖表只是不再削減它了。

企業一直尋求更好的方式來視覺化資料，更好的互動和使圖表多角度。畢竟，只有從資料中抽出的見解才是有用的。

JavaScript 圖表庫出現了，作為漂亮的，容易理解的，互動式的視覺化圖表最有力的工具。它能更容易提取和傳達關鍵的模式和見解，而靜態圖表往往不明顯。

為了使事情更加簡單，我努力挖掘了很多選項，找到了你需要的最好的 JavaScript 圖表庫。所以，讓我們開始吧。

1. Chartist.js

Chartist 的高效和人性化設計甚至吸引了離開 Excel 就會感覺不舒服的人。可響應（使用媒體查詢）和獨立 DPI 意味著這些圖表可以為你提供一個良好的解決方案，如果你在考慮將你的圖表應用於包括手機，平板和桌面電腦的多終端裝置。基於 SVG 的設計讓它在未來更具相容性。

Chartist 的於從不同在於它是社群的成果，這使得它沒有其他圖表庫的侷限性。由於過於關注瑣碎的變動和功能完整，導致你在使用其他類庫時很焦心。

協議: 開源，所有使用者皆可免費使用。

2. FusionCharts

FusionCharts 帶來了一個最全面的庫，超過 90 中圖表和 900 種圖——所有均就緒備用。它們自詡為行業內最好看圖表，它提供了一個功能強大的體驗儀表板，通過它可以鳥瞰其整個業務功能。

FusionCharts 相容從 PC 和 Mac 電腦，iPhone 和 Android 平板電腦等多種裝置；他們做了許多額外的努力來確保跨瀏覽器的相容性，甚至包括 IE6！

他們還涵蓋了所有基礎格式 —— JSON 和 XML 資料格式都能夠接受；繪製可以通過 HTML5、SVG 和 VML，圖表可以匯出為 PNG，JPG 或 PDF 格式。FusionCharts 的擴充套件可以很容易地與你所選擇的任何技術整合，包括 jQuery，AngularJS，PHP 和 Rails。

總的來說，FusionCharts 擁有你建立漂亮圖表和做嚴格業務分析所需的任何特徵和格式。而且最好的部分是非商業用途時你可以免費下載並使用，沒有任何限制。

原始碼許可證：非商業免費，商業用途收費。

3. Dygraphs

Dygraphs 是一個開源的 JavaScript 圖表庫，最適用於極端大資料集。它是開箱式互動，通過縮放甚至可以支援手機。

它既相容主流瀏覽器，也向後相容 IE8。選項和自定義回撥功能使它具有極高的可配置性。

協議: 開源，面向所有使用者免費。

4. Chart.js

Chart.js適用於小專案，如果你需要扁平化，乾淨，優雅，快速。它是一個微型的開源庫，最小化壓縮後只有11kb大小。包括六個核心圖表型別（線圖，柱圖，雷達圖，極地圖，餅圖和環形圖）每個都是獨立的模組，所以你甚至可以只載入專案需要的模組以最大化縮小程式碼佔用空間。

它使用HTML5 canvas元素渲染圖表，並且使用polyfills方式相容在IE7/8上執行。所有圖表都是可響應的。

協議: 開源，面向所有使用者免費。

5. Google Charts

Google Charts 提供大量不同種類的圖表，它最大程度上滿足了資料視覺化的需要。圖表基於 HTML5/SVG，為了相容老版本的 IE 還支援 VML。所有的圖表都是可互動，可縮放的。你可以去看看他們的圖表庫。並且最棒的部分是他們的圖表絕對免費。

協議：免費，但是不開源，在你的伺服器上使用他們的 JS 檔案是 Google’s協議不允許 的。因此如果你是一家企業並且有很多敏感資料，Google Charts 可能不是一個最佳的選項。

6. Highcharts

Highcharts 是又一個流行的互動圖表庫，與其他庫一樣，它是基於 HTML5/SVG/VML，所以不需要擴充套件外掛。提供的圖表型別很廣泛，像曲線圖，柱狀圖，條形圖，地圖，儀表盤等。

它還提供個人使用者免費，可線上生成互動式圖表的介面 Highcharts cloud，商業使用需要購買授權。

協議: 非商業使用免費，商業使用付費。

7. Flot

Flot 是最古老的圖表庫之一，圍繞著用法簡單並聚焦互動特性。它是特定的 jQuery 庫，這意味著你需要使用它需要熟悉基礎的 jQuery。但是從另一方面來說，這意味著你可以全面控制呈現，動作和使用者互動。

Flot 相容大多數現代瀏覽器，向下相容到 IE6。Flot 的外掛庫提供許多型別的圖，所有貢獻都是社群提供的。你可以看看這些由 Flot 製作的例子。

協議: 開源，面向所有使用者免費。

8. D3.js

D3通常是提到資料視覺化時出現的第一個名字。它是一個非常強大的開源專案，可以通過動態更新DOM創造出驚人的視覺效果和圖形。另外，它使用HTML，CSS和SVG。

它符合W3C標準，並且是跨瀏覽器相容的。開發者們往往喜歡它所帶來的許多特徵，比如“進入和退出”以及強大的過渡。你可以到這裡找到一些 D3 的示例。

需要說明的是，它沒有預建圖表，即時學習基本的圖表也有一條非常陡峭的學習曲線。但開發者們是極富創新性，開發出了不少基於D3的包裝庫。後面我們將涉及到其中的一些佼佼者。

原始碼許可證: 開源。免費使用。

9. n3-charts

如果你正在尋找一種在 AngularJS 應用下建立簡單互動線圖的方法，這將是你所需要的。N3 基於D3.js 針對小量受眾–基於 AngularJS 繪製通用線圖。如果你需要更多的圖表型別，它可能不適合你。你可以在這裡看到一些N3線圖的例項。

原始碼許可證：開源。對所有人免費。

10. NVD3

NVD3是一個旨在建立可複用的圖表和元件的 d3.js 專案——它提供了同樣強大的功能，但更容易使用。它可以讓你處理複雜的資料集來建立更高階的視覺化。

原始碼許可證：開源。對所有人免費。

11. Ember Charts

Addepar 的開發者為提升 Ember 以及其附屬庫 Ember Charts、Ember Tables 和 Ember Widgets 的體驗的工作穩步推進著。Ember Charts 基於 D3.js 和 Ember.js 框架提供了一個易於使用，可擴充套件的圖表套件。

其強壯且優雅——針對壞資料的錯誤處理能確保有怪資料時應用程式不會崩潰。你甚至可以通過擴充套件它來建立自己的圖表型別。

原始碼許可證：開源。對所有人免費。

12. jQuery Sparklines

我們一直在談論那些能搞定一切的重量型的庫。但有時，你需要的是針對簡單的任務簡單些的東西。jQuery Sparklines 外掛提供了一個合適的解決方案。它能夠被用來生成迷你型的小內嵌圖表，剛好足夠去表現趨勢——只需要最小量的編碼。適用於大多數現代瀏覽器包括更老的IE6。

原始碼許可證：開源。對所有人免費。

13. Sigma.js

當我們在特定的使用場景下時，我們必須談談 Sigma。Sigma 是一個強大的 JavaScript 庫，其關注於呈現互動圖形和 Web 網路。

Sigma 的庫和外掛包有大量的互動設定。一旦你使用了 Sigma，你將再也不會覺得線圖無聊。看一下這個sigma.js側翻演示你就會明白我的意思。

原始碼許可證：開源。對所有人免費。

14. Morris.js

是的，正如 Morris 所說，好看的圖不應該製作困難。Morris 是一個基於 jQuery 和 Raphael 的輕量級庫，它提供簡單、乾淨的線條，面積圖，條形及圓環圖。如果你正在尋找一些快速簡單且和優雅的庫，它絕對值得一試。

原始碼許可證：開源。對所有人免費。

15. Cytoscape.js

Cytoscape.js 是一個開源的、功能齊全的圖形庫，它純粹用 JavaScript 編寫，基於 LGPL3+ 許可完全免費。它經過了高度優化沒有外部依賴。Cytoscape.js 可以讓你建立可複用的圖形工具，並能夠整合到你的 JavaScript 程式碼中。

它同樣相容所有現代瀏覽器，還相容各種軟體框架，比如CommonJS和Node.js，AMD/Require.js，jQuery 以及 Meteor/Atmosphere 等許多。注意，雖然它與Cyctoscape 桌面應用名字相同，但它們是完全不同的。

原始碼許可證：免費。對所有人免費。

16. C3.js

C3.js 是另一個基於 D3 可重用的圖表庫。大量的基於 D3 的圖表工具表明了太多人喜歡 D3 的功能，但也反映了大家討厭用 D3 直接編碼。

C3.js 提供了一種不同於 D3 學習曲線的方法，它將構建整個圖表所需要的程式碼進行了包裝。C3允許你建立自定義的類，這樣就可以生成自己的風格。它提供了大量的API和回撥，以便你可以在第一次渲染之後更新圖表。

原始碼許可證：開源。對所有人免費。

17. Rickshaw

Rickshaw 在 Shutterstock 被開發為一個建時間序列圖的工具包。像其他一些我們已經討論過的工具一樣，Rickshaw 也是基於 D3 庫。它是開放並開源的（遵循 MIT 許可）。

你可以在這裡看到一些 Rickshaw 的有趣例子。Rickshaw 的眾多擴充套件和自定義的特效能夠讓你生成漂亮的時序圖。

原始碼許可證：開源。對所有人免費。

18. Cubism.js

Cubism 也許是顯示時間序列最佳的 D3 外掛。是什麼使它脫穎而出的呢？你可以引入多個來源的資料，比如 Graphite、Cube 和其他來創造令人敬畏的實時圖表來展現你的資料。

它能夠渲染增量，使用 Canvas 來一次一個畫素的偏移圖表。Cubism 的水平圖要比標準的平面圖更好地利用垂直空間，能夠讓你一眼下來獲取更多的資料並增加一目瞭然的可能性。

原始碼許可證：開源。對所有人免費。

19. Plottable.js

Plottable 採取了一些不同於 D3 框架的方法。它已經有一套可插拔的模組化元件，這些元件封裝了渲染邏輯。這形成了一個單獨的佈局引擎用來實際定位。

這意味著你可以使用任何 Plottable 的元件並將其新增到現有的圖表，或使用 Plottable 建立一個全新的。它基本以一個更模組化、即插即用的方式賦予了你 D3 的力量。可以通過這些示例看一下 Plottable 的能力。

原始碼許可證：開源。對所有人免費。

 20. Canvas.js

正如名字所隱含的，Canvas.js 是一個 HTML5 —— JavaScript 的圖表庫，基於 Canvas 元素。Canvas 允許你建立完全響應式的且跨裝置的豐富圖表。除此之外，它有許多很好看的主題，他們聲稱要比傳統的基於 Flash 和 SVG 圖型快10倍。

原始碼許可證：非商業免費，商業用途收費。

21. ECharts.js / Enterprise Charts 商業產品圖表庫

ECharts，縮寫來自Enterprise Charts，提供商業產品常用圖表，底層基於ZRender（一個全新的輕量級canvas類庫），建立了座標系，圖例，提示，工具箱等基礎元件，並在此上構建出折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、地圖、和絃圖、力導向佈局圖、儀表盤以及漏斗圖，同時支援任意維度的堆積和多圖表混合展現。

原始碼許可證：開源。對所有人免費。託管到了GitHub上。

總結

資料的視覺化和分析是當今業務流程的的一個重要的組成部分。公司不論大小，都需要簡潔、高效、互動性的方式來詮釋資料。這使得選擇適合你需求的 JavaScript 圖示庫顯得尤為重要。

像 FusionCharts，GoogleCharts，Dygraphs 或 D3 的衍生庫可能更適合那些處理大量資料的企業，或那些很大程度上依賴於資料分析的小公司。如果你只需要一些小而快的庫，Morris.js 或 Chart.js 或許更適合你。對於圖形和和網路，Cytoscape 或 Sigma.js 可能是更好的選擇。

我儘量將最好的工具包括在這裡，但我相信你也有你的最愛。順便說一下。你最喜歡的 JS 圖表庫是哪個，為什麼？請在下面的評論中分享你的想法。

本文最初發表在oschina，文章內容屬作者個人觀點，不代表本站立場。

剛剛博主喜得小公舉, 就開個關於寶媽寶爸孕育寶寶的知識乾貨,以及女性私密和寶爸愛看的笑話.的訂閱號, 每天都更新,全是手寫的原創(除了寶爸愛看的笑話之類的,你懂的,這個真原創不了).

開這個訂閱號原因:老婆是婦幼保護師,我本來就是程式猿,所以正好把這想法實現,希望大家來看看哦!