20 個最棒的 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倍。

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

總結

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

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

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