20個(gè)最棒的JavaScript圖表庫(kù)
每個(gè)企業(yè)在做重要決定時(shí)都傾向于做數(shù)據(jù)分析。實(shí)際上他們很多時(shí)候都是沉淪在數(shù)據(jù)里頭，不知道如何跳出其中。隨著大數(shù)據(jù)的到來(lái)，曾經(jīng)好用的表格和圖表只是不再削減它了。
企業(yè)一直尋求更好的方式來(lái)可視化數(shù)據(jù)，更好的互動(dòng)和使圖表多角度。畢竟，只有從數(shù)據(jù)中抽出的見(jiàn)解才是有用的。
JavaScript 圖表庫(kù)出現(xiàn)了，作為漂亮的，容易理解的，交互式的可視化圖表最有力的工具。它能更容易提取和傳達(dá)關(guān)鍵的模式和見(jiàn)解，而靜態(tài)圖表往往不明顯。
為了使事情更加簡(jiǎn)單，我努力挖掘了很多選項(xiàng)，找到了你需要的***的 JavaScript 圖表庫(kù)。所以，讓我們開(kāi)始吧。
1. Chartist.js
Chartist 的高效和人性化設(shè)計(jì)甚至吸引了離開(kāi) Excel 就會(huì)感覺(jué)不舒服的人。可響應(yīng)（使用媒體查詢(xún)）和獨(dú)立 DPI 意味著這些圖表可以為你提供一個(gè)良好的解決方案，如果你在考慮將你的圖表應(yīng)用于包括手機(jī)，平板和桌面電腦的多終端設(shè)備?；?SVG 的設(shè)計(jì)讓它在未來(lái)更具兼容性。
Chartist 的于從不同在于它是社區(qū)的成果，這使得它沒(méi)有其他圖表庫(kù)的局限性。由于過(guò)于關(guān)注瑣碎的變動(dòng)和功能完整，導(dǎo)致你在使用其他類(lèi)庫(kù)時(shí)很焦心。
協(xié)議: 開(kāi)源，所有用戶(hù)皆可免費(fèi)使用。
2. FusionCharts
FusionCharts 帶來(lái)了一個(gè)最全面的庫(kù)，超過(guò) 90 中圖表和 900 種圖——所有均就緒備用。它們自詡為行業(yè)內(nèi)***看圖表，它提供了一個(gè)功能強(qiáng)大的體驗(yàn)儀表板，通過(guò)它可以鳥(niǎo)瞰其整個(gè)業(yè)務(wù)功能。
FusionCharts 兼容從 PC 和 Mac 電腦，iPhone 和 Android 平板電腦等多種設(shè)備；他們做了許多額外的努力來(lái)確?？鐬g覽器的兼容性，甚至包括 IE6！
他們還涵蓋了所有基礎(chǔ)格式 —— JSON 和 XML 數(shù)據(jù)格式都能夠接受；繪制可以通過(guò) HTML5、SVG 和 VML，圖表可以導(dǎo)出為 PNG，JPG 或 PDF 格式。FusionCharts 的擴(kuò)展可以很容易地與你所選擇的任何技術(shù)集成，包括 jQuery，AngularJS，PHP 和 Rails。
總的來(lái)說(shuō)，F(xiàn)usionCharts 擁有你創(chuàng)建漂亮圖表和做嚴(yán)格業(yè)務(wù)分析所需的任何特征和格式。而且***的部分是非商業(yè)用途時(shí)你可以免費(fèi)下載并使用，沒(méi)有任何限制。
源碼許可證：非商業(yè)免費(fèi)，商業(yè)用途收費(fèi)。
3. Dygraphs
Dygraphs 是一個(gè)開(kāi)源的 JavaScript 圖表庫(kù)，最適用于極端大數(shù)據(jù)集。它是開(kāi)箱式互動(dòng)，通過(guò)縮放甚至可以支持手機(jī)。
它既兼容主流瀏覽器，也向后兼容 IE8。選項(xiàng)和自定義回調(diào)功能使它具有極高的可配置性。
協(xié)議: 開(kāi)源，面向所有用戶(hù)免費(fèi)。
4. Chart.js
Chart.js適用于小項(xiàng)目，如果你需要扁平化，干凈，優(yōu)雅，快速。它是一個(gè)微型的開(kāi)源庫(kù)，最小化壓縮后只有11kb大小。包括六個(gè)核心圖表類(lèi)型（線(xiàn)圖，柱圖，雷達(dá)圖，極地圖，餅圖和環(huán)形圖）每個(gè)都是獨(dú)立的模塊，所以你甚至可以只加載項(xiàng)目需要的模塊以***化縮小代碼占用空間。
它使用HTML5 canvas元素渲染圖表，并且使用polyfills方式兼容在IE7/8上運(yùn)行。所有圖表都是可響應(yīng)的。
協(xié)議: 開(kāi)源，面向所有用戶(hù)免費(fèi)。
Google Charts 提供大量不同種類(lèi)的圖表，它***程度上滿(mǎn)足了數(shù)據(jù)可視化的需要。圖表基于 HTML5/SVG，為了兼容老版本的 IE 還支持 VML。所有的圖表都是可交互，可縮放的。你可以去看看他們的圖表庫(kù)。并且最棒的部分是他們的圖表絕對(duì)免費(fèi)。
協(xié)議：免費(fèi)，但是不開(kāi)源，在你的服務(wù)器上使用他們的 JS 文件是 Google’s協(xié)議不允許 的。因此如果你是一家企業(yè)并且有很多敏感數(shù)據(jù)，Google Charts 可能不是一個(gè)***的選項(xiàng)。
6. Highcharts
Highcharts 是又一個(gè)流行的交互圖表庫(kù)，與其他庫(kù)一樣，它是基于 HTML5/SVG/VML，所以不需要擴(kuò)展插件。提供的圖表類(lèi)型很廣泛，像曲線(xiàn)圖，柱狀圖，條形圖，地圖，儀表盤(pán)等。
它還提供個(gè)人用戶(hù)免費(fèi)，可在線(xiàn)生成交互式圖表的接口 Highcharts cloud，商業(yè)使用需要購(gòu)買(mǎi)授權(quán)。
協(xié)議: 非商業(yè)使用免費(fèi)，商業(yè)使用付費(fèi)。
7. Flot
Flot 是最古老的圖表庫(kù)之一，圍繞著用法簡(jiǎn)單并聚焦交互特性。它是特定的 jQuery 庫(kù)，這意味著你需要使用它需要熟悉基礎(chǔ)的 jQuery。但是從另一方面來(lái)說(shuō)，這意味著你可以全面控制呈現(xiàn)，動(dòng)作和用戶(hù)交互。
Flot 兼容大多數(shù)現(xiàn)代瀏覽器，向下兼容到 IE6。Flot 的插件庫(kù)提供許多類(lèi)型的圖，所有貢獻(xiàn)都是社區(qū)提供的。你可以看看這些由 Flot 制作的例子。
協(xié)議: 開(kāi)源，面向所有用戶(hù)免費(fèi)。
8. D3.js
D3通常是提到數(shù)據(jù)可視化時(shí)出現(xiàn)的***個(gè)名字。它是一個(gè)非常強(qiáng)大的開(kāi)源項(xiàng)目，可以通過(guò)動(dòng)態(tài)更新DOM創(chuàng)造出驚人的視覺(jué)效果和圖形。另外，它使用HTML，CSS和SVG。
它符合W3C標(biāo)準(zhǔn)，并且是跨瀏覽器兼容的。開(kāi)發(fā)者們往往喜歡它所帶來(lái)的許多特征，比如“進(jìn)入和退出”以及強(qiáng)大的過(guò)渡。你可以到這里找到一些 D3 的示例。
需要說(shuō)明的是，它沒(méi)有預(yù)建圖表，即時(shí)學(xué)習(xí)基本的圖表也有一條非常陡峭的學(xué)習(xí)曲線(xiàn)。但開(kāi)發(fā)者們是極富創(chuàng)新性，開(kāi)發(fā)出了不少基于D3的包裝庫(kù)。后面我們將涉及到其中的一些佼佼者。
源碼許可證: 開(kāi)源。免費(fèi)使用。
9. n3-charts
如果你正在尋找一種在 AngularJS 應(yīng)用下創(chuàng)建簡(jiǎn)單互動(dòng)線(xiàn)圖的方法，這將是你所需要的。N3 基于D3.js 針對(duì)小量受眾–基于 AngularJS 繪制通用線(xiàn)圖。如果你需要更多的圖表類(lèi)型，它可能不適合你。你可以在這里看到一些N3線(xiàn)圖的實(shí)例。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
10. NVD3
NVD3是一個(gè)旨在建立可復(fù)用的圖表和組件的 d3.js 項(xiàng)目——它提供了同樣強(qiáng)大的功能，但更容易使用。它可以讓你處理復(fù)雜的數(shù)據(jù)集來(lái)創(chuàng)建更高級(jí)的可視化。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
#p#
11. Ember Charts
Addepar 的開(kāi)發(fā)者為提升 Ember 以及其附屬庫(kù) Ember Charts、Ember Tables 和 Ember Widgets 的體驗(yàn)的工作穩(wěn)步推進(jìn)著。Ember Charts 基于 D3.js 和 Ember.js 框架提供了一個(gè)易于使用，可擴(kuò)展的圖表套件。
其強(qiáng)壯且優(yōu)雅——針對(duì)壞數(shù)據(jù)的錯(cuò)誤處理能確保有怪?jǐn)?shù)據(jù)時(shí)應(yīng)用程序不會(huì)崩潰。你甚至可以通過(guò)擴(kuò)展它來(lái)創(chuàng)建自己的圖表類(lèi)型。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
我們一直在談?wù)撃切┠芨愣ㄒ磺械闹亓啃偷膸?kù)。但有時(shí)，你需要的是針對(duì)簡(jiǎn)單的任務(wù)簡(jiǎn)單些的東西。jQuery Sparklines 插件提供了一個(gè)合適的解決方案。它能夠被用來(lái)生成迷你型的小內(nèi)嵌圖表，剛好足夠去表現(xiàn)趨勢(shì)——只需要最小量的編碼。適用于大多數(shù)現(xiàn)代瀏覽器包括更老的IE6。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
13. Sigma.js
當(dāng)我們?cè)谔囟ǖ氖褂脠?chǎng)景下時(shí)，我們必須談?wù)?Sigma。Sigma 是一個(gè)強(qiáng)大的 JavaScript 庫(kù)，其關(guān)注于呈現(xiàn)交互圖形和 Web 網(wǎng)絡(luò)。
Sigma 的庫(kù)和插件包有大量的互動(dòng)設(shè)置。一旦你使用了 Sigma，你將再也不會(huì)覺(jué)得線(xiàn)圖無(wú)聊?？匆幌?a rel="nofollow" target="_blank">這個(gè)sigma.js側(cè)翻演示你就會(huì)明白我的意思。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
14. Morris.js
是的，正如 Morris 所說(shuō)，好看的圖不應(yīng)該制作困難。Morris 是一個(gè)基于 jQuery 和 Raphael 的輕量級(jí)庫(kù)，它提供簡(jiǎn)單、干凈的線(xiàn)條，面積圖，條形及圓環(huán)圖。如果你正在尋找一些快速簡(jiǎn)單且和優(yōu)雅的庫(kù)，它絕對(duì)值得一試。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
15. Cytoscape.js
Cytoscape.js 是一個(gè)開(kāi)源的、功能齊全的圖形庫(kù)，它純粹用 JavaScript 編寫(xiě)，基于 LGPL3+ 許可完全免費(fèi)。它經(jīng)過(guò)了高度優(yōu)化沒(méi)有外部依賴(lài)。Cytoscape.js 可以讓你創(chuàng)建可復(fù)用的圖形工具，并能夠集成到你的 JavaScript 代碼中。
它同樣兼容所有現(xiàn)代瀏覽器，還兼容各種軟件框架，比如CommonJS和Node.js，AMD/Require.js，jQuery 以及 Meteor/Atmosphere 等許多。注意，雖然它與Cyctoscape 桌面應(yīng)用名字相同，但它們是完全不同的。
源碼許可證：免費(fèi)。對(duì)所有人免費(fèi)。
16. C3.js
C3.js 是另一個(gè)基于 D3 可重用的圖表庫(kù)。大量的基于 D3 的圖表工具表明了太多人喜歡 D3 的功能，但也反映了大家討厭用 D3 直接編碼。
C3.js 提供了一種不同于 D3 學(xué)習(xí)曲線(xiàn)的方法，它將構(gòu)建整個(gè)圖表所需要的代碼進(jìn)行了包裝。C3允許你創(chuàng)建自定義的類(lèi)，這樣就可以生成自己的風(fēng)格。它提供了大量的API和回調(diào)，以便你可以在***次渲染之后更新圖表。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
17. Rickshaw
Rickshaw 在 Shutterstock 被開(kāi)發(fā)為一個(gè)建時(shí)間序列圖的工具包。像其他一些我們已經(jīng)討論過(guò)的工具一樣，Rickshaw 也是基于 D3 庫(kù)。它是開(kāi)放并開(kāi)源的（遵循 MIT 許可）。
你可以在這里看到一些 Rickshaw 的有趣例子。Rickshaw 的眾多擴(kuò)展和自定義的特性能夠讓你生成漂亮的時(shí)序圖。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
18. Cubism.js
Cubism 也許是顯示時(shí)間序列***的 D3 插件。是什么使它脫穎而出的呢？你可以引入多個(gè)來(lái)源的數(shù)據(jù)，比如 Graphite、Cube 和其他來(lái)創(chuàng)造令人敬畏的實(shí)時(shí)圖表來(lái)展現(xiàn)你的數(shù)據(jù)。
它能夠渲染增量，使用 Canvas 來(lái)一次一個(gè)像素的偏移圖表。Cubism 的水平圖要比標(biāo)準(zhǔn)的平面圖更好地利用垂直空間，能夠讓你一眼下來(lái)獲取更多的數(shù)據(jù)并增加一目了然的可能性。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
19. Plottable.js
Plottable 采取了一些不同于 D3 框架的方法。它已經(jīng)有一套可插拔的模塊化組件，這些組件封裝了渲染邏輯。這形成了一個(gè)單獨(dú)的布局引擎用來(lái)實(shí)際定位。
這意味著你可以使用任何 Plottable 的組件并將其添加到現(xiàn)有的圖表，或使用 Plottable 創(chuàng)建一個(gè)全新的。它基本以一個(gè)更模塊化、即插即用的方式賦予了你 D3 的力量?？梢酝ㄟ^(guò)這些示例看一下 Plottable 的能力。
源碼許可證：開(kāi)源。對(duì)所有人免費(fèi)。
20. Canvas.js
正如名字所隱含的，Canvas.js 是一個(gè) HTML5 —— JavaScript 的圖表庫(kù)，基于 Canvas 元素。Canvas 允許你創(chuàng)建完全響應(yīng)式的且跨設(shè)備的豐富圖表。除此之外，它有許多很好看的主題，他們聲稱(chēng)要比傳統(tǒng)的基于 Flash 和 SVG 圖型快10倍。
源碼許可證：非商業(yè)免費(fèi)，商業(yè)用途收費(fèi)。
總結(jié)
數(shù)據(jù)的可視化和分析是當(dāng)今業(yè)務(wù)流程的的一個(gè)重要的組成部分。公司不論大小，都需要簡(jiǎn)潔、高效、互動(dòng)性的方式來(lái)詮釋數(shù)據(jù)。這使得選擇適合你需求的 JavaScript 圖標(biāo)庫(kù)顯得尤為重要。
像 FusionCharts，GoogleCharts，Dygraphs 或 D3 的衍生庫(kù)可能更適合那些處理大量數(shù)據(jù)的企業(yè)，或那些很大程度上依賴(lài)于數(shù)據(jù)分析的小公司。如果你只需要一些小而快的庫(kù)，Morris.js 或 Chart.js 或許更適合你。對(duì)于圖形和和網(wǎng)絡(luò)，Cytoscape 或 Sigma.js 可能是更好的選擇。
我盡量將***的工具包括在這里，但我相信你也有你的***。順便說(shuō)一下。你最喜歡的 JS 圖表庫(kù)是哪個(gè)，為什么？請(qǐng)?jiān)谙旅娴脑u(píng)論中分享你的想法。
