用於構建互動式圖表的最佳 jQuery 圖表庫

oschina發表於2013-12-09

  對於JQuery圖表來說,其重要的功能是以一個簡潔和互動的方式展示繁雜的原始資料。這並不僅僅以各種顏色來渲染展示資料,而應該是更能夠吸引讀者和方便使用者理解。

  稍後介紹的某些javascript圖表庫,已經越來越流行了,因為它們有著相當吸引人的元件,囊括了我們已知的包括線狀圖,柱狀圖和餅圖等7種圖表型別。另外,這些js圖表庫提供一些有用的元件作為它們的可選項,比如說放大,縮小,這些工具能提供關於資料的更多資訊,同時也提供一些選項對其進行定製。

  使用者通常遇到某些使用了相容現代瀏覽器的HTML5的canvas特性的jQuery圖表,並不能很好的與IE相容。整體上,這些庫整合了六種圖表型別,比如散點圖,餅圖,柱狀圖,帶點的折線圖以及區域圖。這些圖表能夠通過簡單的配置就能展示多種圖例,這將幫助人們清楚的分辨各圖表項。

  在這篇文章中,我們分享給讀者的是15個圖表庫——各種從簡單到複雜的高階圖表,它們都能勝任。希望你們喜歡!

  1. Chart.js : 使用HTML5 canvas的圖表庫

chartjs

  Chart.js是一個令人印象深刻的基於HTML5的canvas特性構建的javascript圖表庫。目前支援六種圖表型別(折線圖,柱狀圖,雷達圖,餅圖,柱狀區域圖和極座標區域圖),而且這些通過一個獨立的,不足5Kb的包來提供的。顏色,字型,加粗以及圖表大小都是可以定製的。同時,圖表也可以選擇在載入的時候新增動畫效果。

  Source

  2. xCharts : 基於資料驅動的圖表

xcharts

  xCharts是一個用於給網站建立具有漂亮的視覺效果和自定義資料驅動的圖表的javascript庫,它依賴於D3.js。基於HTML,CSS和SVG技術,xChart被設計成能夠被動態,流式和開放的整合和定製。

  由於xChart使用SVG技術,我們能夠直接通過CSS生成大部分的我們定義的xChart圖表。這意味著如果你願意,你只需要做很少的控制就可以處理這些視覺化的圖表。定義圖表風格的最好的方式是從包含的樣式表開始,或者使用你的瀏覽器的元素監視器來檢視每一個元素可用的CSS選擇器。

  Source

  3. Sigma.js : 使用HTML5的canvas物件作圖

sigma-js

  Sigma.js 是一個使用HTML5 Canvas元素作圖的免費開源的javascript圖表庫。它被特別設計成適合分享頁面上互動的網路地圖和瀏覽動態的網路資料庫。這個js庫以MIT協議分發。

  Source

  4. HighCharts

highchartjs

  Highcharts 是一個純粹使用HTML5/Javascript寫的圖表庫,能向你的網站或者網路應用提供直觀互動的圖表。目前,Highcharts支援折線圖,曲線圖,面積圖,面積擬合圖,條狀圖,柱狀圖,餅圖,散點圖,儀表圖,面積範圍圖,面積曲線圖,條狀範圍圖,氣泡圖,箱型圖,誤差線,漏斗圖,瀑布流和極座標圖表型別。

  Source

  5.Fusion Charts

fusion-charts

  jQuery 的FusionCharts外掛幫助你增加互動式的JavaScript圖表,在你的網站,移動端和企業級應用中繪圖。它將FusionCharts套件XT的靈動和全面的特點與jQuery簡易的語法融合在了一起

  Source

  6. Flot :  jQuery中引人注目的JavaScript繪圖外掛

flot

  Flot 為jQuery準備的一個純JavaScript繪相簿, 重點在於使用簡單,引人注目的介面和良好的互動特性。圖的一些關鍵特性是通過開關,放大縮小和與資料點互動來控制的,此外還有它加入了簡單工具提醒的功能

  Source

  7. JS Charts : 免費的JavaScript圖表

jscharts

  JS Charts是一個基於JavaScript的圖生成器,它只需要很少或不需要編碼。使用JS Charts來繪製圖表是一個簡單且容易的工作,因為你只需要使用客戶端指令碼(即通過Web瀏覽器操作)。不需要額外的外掛或伺服器模組。只引用這個指令碼,準備好圖表資料的XML、JSON或JavaScript陣列,OK,你的圖表已經就緒了!

  Source

  8. jQuery Sparklines

jQuery-Sparklines

  這個jQuery外掛直接在瀏覽器中生成波形圖(小的內聯圖表),使用的資料可以是內嵌在HTML中或通過JavaScript提供。這個外掛與大多數現代瀏覽器相容,已經使用Firefox 2+、Safari 3+、Opera 9、Google Chrome以及Internet Explorer 6,7,8 & 9甚至是iOS和Android測試過。

  Source

  9. Morris.js : 描繪按時間順序的線型圖

morrisjs

  Morris.js是一個使用jQuery和Raphael來輕鬆描繪時間線型圖的輕量級框架。Morris.js最初是在howmanyleft.co.uk被用來作圖的程式碼。現在他已經對全世界開源去擴充套件和分享。

  Source

  10. jQuery OrgChart

jquery-org-chart

  jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display.

  Source

  11. jqPlot

jqPlot

  jqplot是jQuery這個JavaScript框架的繪圖和圖表外掛。jqplot能生成優美的線條,包含諸多特性的柱狀圖及餅圖,這些特性如:轉軸的文字,趨勢線的自動計算,工具提示和資料點突出,更為方便使用的合理預設值。

  Source

  12. Grafico

grafico

  Grafico是一個以Raphaël和Prototype.js構建的JavaScript圖表庫。這個庫提供了一系列的圖表,這些圖片遵循Stephen Few和Edward Tufte奠定的指導方針。Grafico提供了漂亮的能夠有效傳達資訊的圖表。

  Source

  13. GraphUp

graphup

  GraphUp是一個非常靈活且輕量級的jQuery (v1.4+)資料表外掛。它使用顏色、柱形圖和氣泡來標識資料。

  Source

  14. dygraphs

dygraphs-javascript

  dygraphs是一個開源的JavaScript庫,它可以用來進行互動,生成以時間為序列的可縮放的圖表。它的設計目的是用來顯示允許使用者瀏覽和詮釋的密集資料集。你可以使用滑鼠滑過時的值強調。單擊並拖動來縮放。雙擊撤銷縮放。改變數量並回車來調整平均週期。

  Source

  15. jsPlumb jQuery外掛

jsplumb

  jsPlumb這個jQuery外掛為開發者提供了一種視覺化連線網頁元素的方法,大致與雅虎Pipes中使用相同的方式。jsPlumb允許你使用“plumbing”連線螢幕上的元素,如果支援的話也可以使用Canvas元素,老版本的瀏覽器可以使用谷歌的Canvas探索指令碼來獲得支援。jQuery拖動的全透明支援也包括在內,API也超級簡單,而且指令碼的壓縮版本只有10.5K。

  Source

  原文地址:http://codegeekz.com/best-jquery-chart-libraries-for-building-interactive-charts/

相關文章