11個很棒的 jQuery 圖表庫


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

  “Dataviz”是數據可視化的縮寫,其主要目標是:

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

  作為開發人員,我們必須確保我們使用正確的工具來從數據中創建有意義的圖表,當我們看圖的時候能夠獲得適當的細節信息。

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

 1. FusionCharts

fusion-charts

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

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

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

  License:非商業用戶免費,商業用戶收費。

 2. Flot

flot

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

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

  License: 開源,對所有人免費

 3. Highcharts

high-charts

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

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

  跟FusionCharts一樣,它也支持所有的瀏覽器(包括IE6)、設備和平台。並且它有很好的社區支持,你可以在社區主頁找到所有的插件。另一個非常酷的功能是它的演示部分,使你可以很快的運行起來。

  License:非商業用戶免費,商業用戶需要付費

 4. Morris.js

morris

  Morris.js 是一個界面簡潔功能強大的圖表庫,基於jQuery。它的目的是提供簡單易用的漂亮的圖表。默認的圖表類型有 line, bar, area, and donut graphs。該庫提供了一些例子,你可以通過這些代碼入門並在幾分鍾之內創建出好看的圖表。

  License: Simplified BSD License.

 5. CanvasJS jQuery

canvas-js

  CanvasJS jQuery是一個源自與CanvasJS的jQuery圖表庫。使用這個插件的時候,你可以利用所有CanvasJS的標准功能,以及一個擴展的功能集,包括動態更新,平移和縮放,事件和輸出圖像。圖表表現相當好,對於大數據集和基本包,包括24個不同的圖表類型,所有這些都是響應。

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

  License:非商業用戶免費,商業用戶需要付費

 6. Cytoscape.js

cytoscape

  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

  有時候你需要的只是符合你的內容小圖,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

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

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

  License: Open-source under the MIT License.

 9. jqPlot

jq-plot

  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/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM