如果你曾經(jīng)使用過任何類型的數(shù)據(jù)，你應(yīng)該知道閱讀一排排數(shù)據(jù)的痛苦。通過所有這些數(shù)據(jù)弄清楚他們的意思是非常不容易的?？梢暬瘜τ诮鉀Q這個問題起到了重要的作用?？梢暬档土藬?shù)據(jù)閱讀的難度，幫助決策者獲得可操作的見解。

“Dataviz”是數(shù)據(jù)可視化的縮寫，其主要目標(biāo)是：

通過統(tǒng)計圖形、圖表、信息圖像、表格以及選定表格來清晰的、有效的與用戶交流信息。
—Wikipedia

作為開發(fā)人員，我們必須確保我們使用正確的工具來從數(shù)據(jù)中創(chuàng)建有意義的圖表，當(dāng)我們看圖的時候能夠獲得適當(dāng)?shù)募?xì)節(jié)信息。

有很多的 jQuery 圖表插件可以幫你的網(wǎng)頁創(chuàng)建交互式的可視化圖表，但是哪些是真正的有價值呢？這篇文章中列出了我最喜歡的一些，并且標(biāo)注了每一個插件最適用的場景。通過這種方式，你可以根據(jù)你的目的準(zhǔn)確的選擇插件而不需要浪費(fèi)很多的精力和時間。

1. FusionCharts

作為JavaScript圖表庫的一部分，F(xiàn)usionCharts也提供了一個jQuery的插件，它組合了FusionCharts所有好的部分–智能設(shè)計、動畫以及豐富的交互體驗(yàn)。圖表無縫工作在所有類型的設(shè)備包括PC，Mac，Android設(shè)備以及iPad和iPhone，并且向后兼容了IE6。

這個jQuery插件，有一些非常強(qiáng)大的功能。圖表可以從JSON數(shù)據(jù)、XML數(shù)據(jù)、HTML表格數(shù)據(jù)生成。隨著圖表的時間軸會有很多的事件（這是一個完整的列表），從而使你很容易地連接到偵聽器來執(zhí)行特定的動作。

他們有一個方便的使用指南來幫助您開始使用插件，并且提供了你可以直接使用的在線的代碼片段。你也可以在Github上找到插件和相應(yīng)的代碼。

License：非商業(yè)用戶免費(fèi)，商業(yè)用戶收費(fèi)。

2. Flot

在丹麥，F(xiàn)lot意味著優(yōu)雅、迷人、令人印象深刻，這也正是Flot的目的。它的主要目的就是創(chuàng)建易于使用、有吸引力、互動的圖形和圖表。交互功能包括把一系列的開或關(guān)，平移和縮放。其它功能包括多軸支撐，疊圖，使用Canvas渲染文本而非HTML，還有其他許多功能。

有很多的視頻教程可以幫你學(xué)習(xí)如何使用Flot，并且有很多實(shí)例你可以參考。

License: 開源，對所有人免費(fèi)

3. Highcharts

Highcharts 是另一個非常流行的JavaScript圖表庫。它發(fā)布于2009年，提供常見的圖表、地圖和股票圖表。

你可以從開發(fā)庫本身的下載主頁下載到j(luò)Query的版本，你可以不需要處理JavaScript就能體會到它的強(qiáng)大功能。

跟FusionCharts一樣，它也支持所有的瀏覽器（包括IE6）、設(shè)備和平臺。并且它有很好的社區(qū)支持，你可以在社區(qū)主頁找到所有的插件。另一個非?？岬墓δ苁撬?a target="_blank">演示部分，使你可以很快的運(yùn)行起來。

License:非商業(yè)用戶免費(fèi)，商業(yè)用戶需要付費(fèi)

4. Morris.js

Morris.js 是一個界面簡潔功能強(qiáng)大的圖表庫，基于jQuery。它的目的是提供簡單易用的漂亮的圖表。默認(rèn)的圖表類型有 line, bar, area, and donut graphs。該庫提供了一些例子，你可以通過這些代碼入門并在幾分鐘之內(nèi)創(chuàng)建出好看的圖表。

License: Simplified BSD License.

5. CanvasJS jQuery

CanvasJS jQuery是一個源自與CanvasJS的jQuery圖表庫。使用這個插件的時候，你可以利用所有CanvasJS的標(biāo)準(zhǔn)功能，以及一個擴(kuò)展的功能集，包括動態(tài)更新，平移和縮放，事件和輸出圖像。圖表表現(xiàn)相當(dāng)好，對于大數(shù)據(jù)集和基本包，包括24個不同的圖表類型，所有這些都是響應(yīng)。

這里有一些很好的例子源代碼展示的圖表功能以及jQuery UI集成。

License:非商業(yè)用戶免費(fèi)，商業(yè)用戶需要付費(fèi)

6. Cytoscape.js

Cytoscape.js并不是一個常見的圖表庫，但它足以被列出這個列表。不像我們目前討論倒的其他插件，Cytoscape真的是一個jQuery圖表庫（例如它有助于可視化圖形或網(wǎng)絡(luò)）。當(dāng)它把網(wǎng)絡(luò)原始數(shù)據(jù)轉(zhuǎn)化成圖表的時候，它是高度可定制的，并且它可以出來超大的數(shù)據(jù)量。它兼容所有現(xiàn)代的瀏覽器，CommonJS/NodeJS, jQuery and Meteor/Atmosphere。它還支持觸摸事件和標(biāo)準(zhǔn)手勢。為了更全面的功能列表，請參閱cytoscape.js簡介頁面。

Cytoscape.js的文檔包含一些在線的實(shí)例，和一套完整的單元測試。

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

7. Peity

有時候你需要的只是符合你的內(nèi)容小圖，peity是這些情況下一個完美的解決方案。它能夠讓你使用一小段代碼將一個數(shù)據(jù)集轉(zhuǎn)化為 bar charts, donut graphs, line graphs, or mini pies。它以SVG的形式展現(xiàn)，因此適用于所有支持SVG元素的瀏覽器，如Chrome, Opera, Firefox, IE9+, and Safari。您還可以自定義圖表的視覺元素并設(shè)置動態(tài)顏色。圖表可以更新，以反映數(shù)據(jù)的變化。GitHub頁面上也有很多的實(shí)例和代碼。

License: Open-source under the MIT License.

8. Easy Pie Chart

當(dāng)我們提到簡單和高效的時候，我不得不提 Easy Pie Chart。這是一個jQuery插件，它做一件事，并且只做這一件事情–把單數(shù)據(jù)呈現(xiàn)出餅狀圖。它使用畫布元素來渲染這些圖表。該圖很容易定制，只需要幾行代碼。它們也是響應(yīng)式的，根據(jù)分辨率規(guī)模，展示清晰的圖片，即使是視網(wǎng)膜屏幕。

該插件兼容所有支持畫布元素的現(xiàn)代瀏覽器。在IE 8及更舊版本，你可以使用excanvas渲染圖。你可以在GitHub頁面上發(fā)現(xiàn)一些有趣的實(shí)例。

License: Open-source under the MIT License.

9. jqPlot

jqPlot是一個jQuery插件，可以讓你插入純客戶端圖表插入到你的網(wǎng)頁。jqPlot揚(yáng)言聲稱是高度的可插入性–線，軸線，陰影，網(wǎng)格等–都通過插件來渲染和繪制元素，并且高度可定制。它有很多鉤子讓你可以自定義處理事件函數(shù)，添加新的圖表類型，添加新的畫布的情節(jié)和其他高級功能。

詳細(xì)的使用教程可以參考這里。一些動態(tài)渲染實(shí)例和單頁測試請看這里。

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

10. jQuery Sparklines

jQuery Sparklines（類似于Peity），生成直接應(yīng)用與HTML或者JavaScript的內(nèi)嵌數(shù)據(jù)圖表。上圖中每一個例子只需要用一行代碼來創(chuàng)建。最好的是，你甚至不必自己寫代碼。它有一個整潔的代碼生成器，你可以在這里填寫數(shù)據(jù)，并設(shè)置選項(xiàng)，它就可以為你生成代碼。注意，你無法為這些圖表添加任何文本或者標(biāo)簽。他們的目的是在你的文本行中提供快速的印象或者趨勢。如果你想注釋或其他功能，你最好選擇我們上面提到的全功能插件。

如果你想使用這個插件，這里有一個詳細(xì)的文檔，包括選項(xiàng)，語法和高級用法。

License: Open-source. Free for all uses.

11. jQuery.Gantt

目前為止，我們討論的都是一些創(chuàng)建正規(guī)圖形圖表的插件、網(wǎng)絡(luò)圖插件、以及迷你的內(nèi)嵌圖形圖表。但是如果你需要一個項(xiàng)目管理功能的儀表盤，你可能需要甘特圖（Gantt charts）。jQuery.Gantt 通過Ajax獲取JSON數(shù)據(jù)來為你創(chuàng)建甘特圖。功能包括平移，縮放，分頁，每行的多個任務(wù)，每個任務(wù)有不同的顏色等。想學(xué)習(xí)使用這個插件以及它提供的參數(shù)，你可以參考此文檔。

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

總結(jié)

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

你呢？當(dāng)你需要創(chuàng)建圖形和圖表時，你會使用什么？你最喜歡的插件是什么？為什么？請在下面的評論中與我們分享，讓我們開始討論。

 

via：sitepoint.com，本文由 Specs 翻譯整理，發(fā)布在 WEB資源網(wǎng)，轉(zhuǎn)載請注明來源。