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/