11個很棒的 jQuery 圖表庫

　　如果你曾經使用過任何型別的資料，你應該知道閱讀一排排資料的痛苦。通過所有這些資料弄清楚他們的意思是非常不容易的。視覺化對於解決這個問題起到了重要的作用。視覺化降低了資料閱讀的難度，幫助決策者獲得可操作的見解。

　　“Dataviz”是資料視覺化的縮寫，其主要目標是：

通過統計圖形、圖表、資訊影像、表格以及選定表格來清晰的、有效的與使用者交流資訊。
—Wikipedia

　　作為開發人員，我們必須確保我們使用正確的工具來從資料中建立有意義的圖表，當我們看圖的時候能夠獲得適當的細節資訊。

　　有很多的 jQuery 圖表外掛可以幫你的網頁建立互動式的視覺化圖表，但是哪些是真正的有價值呢？這篇文章中列出了我最喜歡的一些，並且標註了每一個外掛最適用的場景。通過這種方式，你可以根據你的目的準確的選擇外掛而不需要浪費很多的精力和時間。

　1. FusionCharts

　　作為JavaScript圖表庫的一部分，FusionCharts也提供了一個jQuery的外掛，它組合了FusionCharts所有好的部分–智慧設計、動畫以及豐富的互動體驗。圖表無縫工作在所有型別的裝置包括PC，Mac，Android裝置以及iPad和iPhone，並且向後相容了IE6。

　　這個jQuery外掛，有一些非常強大的功能。圖表可以從JSON資料、XML資料、HTML表格資料生成。隨著圖表的時間軸會有很多的事件（這是一個完整的列表），從而使你很容易地連線到偵聽器來執行特定的動作。

　　他們有一個方便的使用指南來幫助您開始使用外掛，並且提供了你可以直接使用的線上的程式碼片段。你也可以在Github上找到外掛和相應的程式碼。

　　License：非商業使用者免費，商業使用者收費。

　2. Flot

　　在丹麥，Flot意味著優雅、迷人、令人印象深刻，這也正是Flot的目的。它的主要目的就是建立易於使用、有吸引力、互動的圖形和圖表。互動功能包括把一系列的開或關，平移和縮放。其它功能包括多軸支撐，疊圖，使用Canvas渲染文字而非HTML，還有其他許多功能。

　　有很多的視訊教程可以幫你學習如何使用Flot，並且有很多例項你可以參考。

　　License: 開源，對所有人免費

　3. Highcharts

　　Highcharts 是另一個非常流行的JavaScript圖表庫。它釋出於2009年，提供常見的圖表、地圖和股票圖表。

　你可以從開發庫本身的下載主頁下載到jQuery的版本，你可以不需要處理JavaScript就能體會到它的強大功能。

　　跟FusionCharts一樣，它也支援所有的瀏覽器（包括IE6）、裝置和平臺。並且它有很好的社群支援，你可以在社群主頁找到所有的外掛。另一個非常酷的功能是它的演示部分，使你可以很快的執行起來。

　　License:非商業使用者免費，商業使用者需要付費

　4. Morris.js

　　Morris.js 是一個介面簡潔功能強大的圖表庫，基於jQuery。它的目的是提供簡單易用的漂亮的圖表。預設的圖表型別有 line, bar, area, and donut graphs。該庫提供了一些例子，你可以通過這些程式碼入門並在幾分鐘之內建立出好看的圖表。

　　License: Simplified BSD License.

　5. CanvasJS jQuery

　　CanvasJS jQuery是一個源自與CanvasJS的jQuery圖表庫。使用這個外掛的時候，你可以利用所有CanvasJS的標準功能，以及一個擴充套件的功能集，包括動態更新，平移和縮放，事件和輸出影像。圖表表現相當好，對於大資料集和基本包，包括24個不同的圖表型別，所有這些都是響應。

　　這裡有一些很好的例子原始碼展示的圖表功能以及jQuery UI整合。

　　License:非商業使用者免費，商業使用者需要付費

　6. Cytoscape.js

　　Cytoscape.js並不是一個常見的圖表庫，但它足以被列出這個列表。不像我們目前討論倒的其他外掛，Cytoscape真的是一個jQuery圖表庫（例如它有助於視覺化圖形或網路）。當它把網路原始資料轉化成圖表的時候，它是高度可定製的，並且它可以出來超大的資料量。它相容所有現代的瀏覽器，CommonJS/NodeJS, jQuery and Meteor/Atmosphere。它還支援觸控事件和標準手勢。為了更全面的功能列表，請參閱cytoscape.js簡介頁面。

　　Cytoscape.js的文件包含一些線上的例項，和一套完整的單元測試。

　　License: Open-source. Free for all users. (LGPL3+)

　7. Peity

　　有時候你需要的只是符合你的內容小圖，peity是這些情況下一個完美的解決方案。它能夠讓你使用一小段程式碼將一個資料集轉化為 bar charts, donut graphs, line graphs, or mini pies。它以SVG的形式展現，因此適用於所有支援SVG元素的瀏覽器，如Chrome, Opera, Firefox, IE9+, and Safari。您還可以自定義圖表的視覺元素並設定動態顏色。圖表可以更新，以反映資料的變化。GitHub頁面上也有很多的例項和程式碼。

　　License: Open-source under the MIT License.

　　8. Easy Pie Chart

　　當我們提到簡單和高效的時候，我不得不提 Easy Pie Chart。這是一個jQuery外掛，它做一件事，並且只做這一件事情–把單資料呈現出餅狀圖。它使用畫布元素來渲染這些圖表。該圖很容易定製，只需要幾行程式碼。它們也是響應式的，根據解析度規模，展示清晰的圖片，即使是視網膜螢幕。

　　該外掛相容所有支援畫布元素的現代瀏覽器。在IE 8及更舊版本，你可以使用excanvas渲染圖。你可以在GitHub頁面上發現一些有趣的例項。

　　License: Open-source under the MIT License.

　9. jqPlot

　　jqPlot是一個jQuery外掛，可以讓你插入純客戶端圖表插入到你的網頁。jqPlot揚言聲稱是高度的可插入性–線，軸線，陰影，網格等–都通過外掛來渲染和繪製元素，並且高度可定製。它有很多鉤子讓你可以自定義處理事件函式，新增新的圖表型別，新增新的畫布的情節和其他高階功能。

　　詳細的使用教程可以參考這裡。一些動態渲染例項和單頁測試請看這裡。

　　License: Open source project. Dual licensed under the MIT and GPL version 2 licenses.

　10. jQuery Sparklines

　　jQuery Sparklines（類似於Peity），生成直接應用與HTML或者JavaScript的內嵌資料圖表。上圖中每一個例子只需要用一行程式碼來建立。最好的是，你甚至不必自己寫程式碼。它有一個整潔的程式碼生成器，你可以在這裡填寫資料，並設定選項，它就可以為你生成程式碼。注意，你無法為這些圖表新增任何文字或者標籤。他們的目的是在你的文字行中提供快速的印象或者趨勢。如果你想註釋或其他功能，你最好選擇我們上面提到的全功能外掛。

　　如果你想使用這個外掛，這裡有一個詳細的文件，包括選項，語法和高階用法。

　　License: Open-source. Free for all uses.

　11. jQuery.Gantt

　　目前為止，我們討論的都是一些建立正規圖形圖表的外掛、網路圖外掛、以及迷你的內嵌圖形圖表。但是如果你需要一個專案管理功能的儀表盤，你可能需要甘特圖（Gantt charts）。jQuery.Gantt 通過Ajax獲取JSON資料來為你建立甘特圖。功能包括平移，縮放，分頁，每行的多個任務，每個任務有不同的顏色等。想學習使用這個外掛以及它提供的引數，你可以參考此文件。

　　License: Open source project. Dual under the MIT and GPL license.

　總結

　　我最喜歡的jQuery圖表庫–至少那些我用過–到此結束。它們涵蓋了每一個圖表型別、功能，以及你可能需要的定製功能。

　　你呢？當你需要建立圖形和圖表時，你會使用什麼？你最喜歡的外掛是什麼？為什麼？請在下面的評論中與我們分享，讓我們開始討論。

　　via：sitepoint.com 翻譯：http://info.9iphp.com/