5個最頂級jQuery圖表類庫插件-Charting plugin


作者:Leonel Hilario
翻譯:Terry li - GBin1.com
英文: 5 Top jQuery Chart Libraries for Interactive Charts

目前對於簡單快速的開發圖的需要使得大家需要找到一種相對簡單的方式來開發互動的圖表。jQuery和其他js類庫使得我們可以更容易的在(X)HTML中訪問數據的呈現。

本文中我們將介紹目前5種圖表類庫能夠不同程度滿足簡答到復雜的圖表展現需求。大多數都是免費或者是針對個人免費的類庫。

GraphUp jQuery plugin - 15美元

Graphup是一中非常輕量級的靈活的jQuery(v1.4+)插件用來美化你的數據表。它能夠使用顏色,柱狀圖及其氣飽來有效的展現你的數據。

  • 支持眾多選項 - 選擇數據清除器和一個油漆工具:填充,柱狀,氣飽圖;配置小數點(支持句號或者逗號);定制顏色及其CSS類;更多其他
  • 輕量級 - 整個插件只有4kb
  • 可擴展 - 你可以很容易的創建你自己的清除器和油漆工具或者顏色表。而且,擁有一個callback來執行上色前對單元格的任何操作。非常靈活,無限可能!大家可以產看演示
  • 功能增強 - 你最初的表仍舊可以查看即時沒有javascript
  • 文檔很全 - live examples and documentation.

兼容性:Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari

1. jQuery Visualize Plugin

如果你想把一張表里的內容以圖形化展示出來的話,那么這個插件將是最好的展示工具。他提供了不同類型的圖標比如柱狀圖,餅圖,面積圖,折線圖

演示實例

支持的圖表: 柱狀圖,餅圖,面積圖,折線圖

系統需求:jQuery ,exanvas(已包括)

瀏覽器支持:IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9.
HTML5 canvas在IE中不支持但是Google維護了一個類庫能將Canvas翻譯成VML,這樣可以允許在任意版本IE中運行

演示地址:http://www.filamentgroup.com/examples/charting_v2/index_2.php

授權類型:MIT and GPL licenses

2. Highcharts

highcharts是非常棒的一個jQuery插件,簡單來說highcharts和大多數的瀏覽器都兼容,甚至是iphone。支持很多類型的圖表。並且是動態的插件,你可以輕松在創建圖表后添加,刪除,修改數列,軸或者點,並且可以從外部加載文件數據,同時支持提示條,這樣你可以輕松的查看圖表中的詳細內容。最后還支持縮放和翻轉。

演示實例

 

 

支持的圖表: 柱狀圖,餅圖,面積圖,折線圖,樣條圖,圓柱圖,散點圖,Areaspline

系統需求:jQuery 或者 MooTools

瀏覽器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, IPhone!

演示地址:http://www.highcharts.com/demo/

授權類型:Creative Commons Attribution  Non-Commercial 3.0 License. 學校,非盈利組織及其個人免費使用。商業網站一個站點80美元

3. Flot

Flot的作者稱它為"jQuery版的有吸引力的javascript標圖",他非常簡單並且實用,很容易就創建圖表所有的選項都是可選的。主要得功能包括:開關系列,縮放,數據點互動,並且擁有簡單的提示框

演示實例

支持的圖表: 柱狀圖,餅圖,點狀圖,折線圖

系統需求:jQuery

瀏覽器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, Konqueror 4+

演示地址http://people.iola.dk/olau/flot/examples/

授權類型:MIT and GPL licenses

4. jQuery Sparklines

Sparklines能夠在HTML或者Javasript中生成很小的行間圖表,對於顯示迷你圖表特別有優勢。因為它只使用1行來完成圖標生成。另外一個非常不過得特性是自刷新。你可以看到它的鼠標移動撲捉在線演示。

演示實例

支持的圖表: 柱狀圖,餅圖,折線圖,Tristate, Bullet, Box Plot

系統需求:jQuery

瀏覽器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, Google Chrome

演示地址: http://omnipotent.net/jquery.sparkline/

授權類型:MIT and GPL licenses

5. jqPlot

最初並沒有進入我的視野,但是經過深入研究后它的確是最好的jQuery圖表免費插件之一。大量的選項提供給你,你甚至可以設置陰影和拖拽操作。甚至可以自動計算趨勢線。個人覺得甚至可以和highcharts媲美。

演示實例

支持的圖表: 柱狀圖,餅圖,折線圖

系統需求:jQuery

瀏覽器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, Google Chrome

演示地址: http://www.jqplot.com/tests/

授權類型:MIT and GPL version2 licenses

文章來源: 5個最頂級jQuery圖表類庫插件-Charting plugin


免責聲明!

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



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