一. Highcharts
支持的圖表:曲線圖,柱狀圖,餅狀圖,區域圖,散狀點圖,綜合圖表。
瀏覽器支持:采用純JavaScript編寫,兼容所有的瀏覽器,Safari、IE6+、火狐和Chrome包括iphone等
功能特性:
1. 包含一些預定義的主題和圖表,界面美觀,運行速度快,動態交互不錯,有很好的兼容性。
2. 不受語言約束:可以在大多數的WEB開發中使用,對個人用戶免費,支持ASP,PHP,JAVA,.NET等多種語言中使用。
3. 提示功能:圖表中可以設置在數據點上顯示提示效果,即將鼠標移動到某個數據點上,可以顯示該點的詳細數據,並且可以對顯示效果進行設置。
4. 放大功能:可以大量數據集中顯示,並且可以放大某一部分的圖形,將圖表的精度增大,進行詳細的顯示,可以選擇橫向或者縱向放大。
5. 時間軸:可以精確到毫秒。
6. 在最新瀏覽器中使用SVG,而在舊版本IE(包括IE6及更新版本)中使用后備的VML。
License:學校,非盈利組織及其個人免費使用。商業需要購買相應的License。所有的License都是永久的,可選的技術支持周期是12個月。
實例地址:http://www.hcharts.cn/demo/index.php
二. Echarts
支持的圖表: 折線圖,柱狀圖,餅形圖,散點圖,K線圖、雷達圖、地圖、和弦圖、力導向布局圖、儀表盤以及漏斗圖,同時支持任意維度的堆積和多圖表混合展現。
瀏覽器支持: IE6+,Firefox,Safari ,Opera 9+,Google Chrome
功能特性:
1. 商業級數據圖表,底層基於ZRender(一個全新的輕量級canvas類庫),創建了坐標系,圖例,提示,工具箱等基礎組件。
2. 支持折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、餅圖(環形圖)、雷達圖(填充雷達圖)、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖等11類圖表,同時提供標題,詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件,支持多圖表、組件的聯動和混搭展現。
3. 直觀,生動,可交互,可高度個性化定制。
4. 創新三大特色:拖拽重計算、數據區域縮放、值域漫游,大大增強了用戶體驗。
License:百度公司
實例地址:http://echarts.baidu.com/doc/example.html
圖例:
三. jqPlot
支持的圖表: 線形圖,柱形圖,餅形圖。
瀏覽器支持: IE7+,Firefox 2.0+, Safari 3+, Opera 9,Google Chrome
功能特性:
1. 有多種圖表樣式可供選擇
2. 可以自定義日期軸線
3. 可設置旋轉軸文字
4. 自動計算趨勢線
5. 工具條提示和高亮數據點
6. 默認最優設置,易於使用
7. 基本依賴:jquery 1.4.3+,jqPlot.js,jqPlot.css,excanvas (IE條件引入,給不支持canvas的 IE7/8 提供增強,IE6下無法使用 jqplot)
8. 只支持一些簡單的圖表,只有一套主題,適合不需要自定義樣式的情況。
License:免費。
實例地址:http://www.jqplot.com/tests/
四. JS Charts
支持的圖表: 線形圖,柱形圖,餅形圖
瀏覽器支持: IE8+,Firefox 1.5 +,Chrome 10 +,Safari 3.1 +,Opera 9,Chrome 10+
功能特性:
1. 支持3D餅狀圖或3D柱狀圖
2. 可定制
3. 可以在線編輯圖表
4. 不需要任何服務端插件
5. 多系列柱狀圖,水平柱狀圖
License:可免費使用,免費版含水印.商業使用收費79美元/1 domain。
實例地址:http://www.jscharts.com/examples
五. Flot
支持的圖表: 線形圖,柱形圖,餅形圖,點狀圖。
瀏覽器支持: IE6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
功能特性:
-
- Jquery插件,采用Canvas繪制圖形,簡單易用,IE8以下不支持HTML5 canvas標簽, 加入ExplorerCanvas插件(excanvas.min.js)就可以正常顯示圖表。
- 實現了矩陣基本計算以及很多的概率統計函數。
- 支持放大縮小以及鼠標追蹤等交互功能。
- Flot的API設計得很簡潔,所以需要額外學習的東西也很少,馬上就可以上手使用。
- 迷人的外觀和交互式特性
- 支持有限的視覺形式,但使用很簡單
License:MIT協議(免費可商用)。
實例地址:http://www.flotcharts.org/flot/examples/
六. Amcharts
支持的圖表: 線形圖,柱狀圖,條形圖,面積圖,燭台圖,雷達等基本圖形,甚至股票圖表
瀏覽器支持: IE6+,Firefox 2.0+,Safari 3+,Opera 9,Konqueror 4+
功能特性:
-
- amCharts在1.x版本是基於flash實現,目前2.x版本改為Javascript/HTML5實現。
- 動畫或靜態,價值軸能夠扭轉。
- 數據可自動重裝上陣與預設頻率。
License:可以免費下載並使用一切Amcharts產品。但免費版有一個限制,會在圖表的左上角顯示該網站的鏈。如果想移除這個鏈接,需要購買商業許可。
實例地址:
七.Ichartjs
支持的圖表: 線形圖,柱狀圖,餅形圖,區域圖,條形圖,堆積圖,組合圖
瀏覽器支持: IE9+,Firefox,Safari,Opera,Chrome,Android,IOS
功能特性:
1. 跨平台:使用純javascript語言,利用HTML5 canvas繪制各式圖形,兼容大部分主流瀏覽器。無論是windows、Mac、還是pad,都能在不改動任何代碼的前提下提供統一的視圖。
2. 輕量級:不依賴任何其他庫,代碼量少。
3. 快速構建:減少了服務器資源,在瀏覽器中有較高的執行效率。
License:基於Apache License 2.0協議的開源項目。
實例地址:http://www.ichartjs.com/samples/index.html
八. D3
支持的圖表: 環狀圖,折線圖,餅形圖,條形圖,堆疊條形圖,散點圖和力導向圖等。(可畫簡單拓撲圖)
瀏覽器支持: 最新主流瀏覽器,IE9+,Firefox,Opera,Chrome
功能特性:
-
- 非常快速的,支持大型數據集的互動和動畫的動態行為。
- 一個數據的API,專注於數據。將數據與網頁中的svg元素綁定起來,然后進行一定的操作
- 不兼容老版本的瀏覽器。
License:BSD協議(免費可商用)。
實例地址:https://github.com/mbostock/d3/wiki/Gallery
九. RGraph
支持的圖表: 支持超過20多種不同類型的圖表。
柱狀圖,極區圖,圓環圖,油量表,測量表,甘特圖,水平柱狀圖,水平進度條圖,網格圖,線圖,路程圖(半環),里程表(全環),餅圖,雷達圖,玫瑰圖,輻射圖,散形圖,溫度計,豎直進度條,瀑布圖。
瀏覽器支持: 所有支持html5的瀏覽器。IE 7/8 需要引入ExCanvas.
功能特性:
-
- 生成的Chart具有可交互性
- 當鼠標點擊或移過時會顯示相應的信息
- 以動態加載Chart或對特殊點進行縮放
License:非商業使用上免費,若商業使用則需要付費。
實例地址:http://www.rgraph.net/examples/index.html
十. CanvasXpress
支持的圖表: 柱狀圖,線狀圖,點狀圖,面積圖,堆積圖,熱點圖,餅狀圖等常見圖表類型。
瀏覽器支持: IE6.0+及所有支持html5的瀏覽器。
功能特性:
-
- 基於HTML5 canvas標簽實現的JavaScript圖表類庫,生成的圖表交互性很強
- 鼠標放上去時會動態顯示值
- 具有相當高的可定制性,可設置圖表文字、顏色和要顯示/隱藏的元素等
- 重要的一點是,雖然它使用了HTML5,但是依然支持IE6瀏覽器。
License:LGPL協議(免費可商用)。
實例地址:http://canvasxpress.org/bar.html
十一. Flotr
支持的圖表: 柱狀圖,線狀圖,點狀圖,面積圖,堆積圖,熱點圖,餅狀圖等常見圖表類型。
瀏覽器支持: IE6.0+(6,7需要引入ExCanvas),Firefox 2.0+,Opera 9.25+,Safari 3.0+,Chrome 10+。
功能特性:
1.基於Ajax框架Prototype開發的javascript繪圖工具
2.支持圖例,鼠標跟蹤,圖片區域選擇,圖片縮放
3.添加事件鈎子(event hook),通過CSS設置樣式
License:MIT協議(免費可商用)。
實例地址:http://www.solutoire.com/experiments/flotr/examples
十二. Flotr2
支持的圖表: 線圖,柱狀圖,餅圖,氣泡圖等。
瀏覽器支持: 兼容性相當不錯,支持包括 IE6 在內的大部分主流瀏覽器及Android和iOS。
功能特性:
-
- 用於繪制基於 HTML5 的圖形和圖表的開源 JavaScript 類庫,是圖表組件 flotr 的分支,但移除了 Prototype 框架的依賴並在其它功能上有很大的改進。
- 移動支持
- 獨立框架
- 可擴展的插件框架
- 定制性非常高,可自定義圖表類型,自定義標題、子標題、顏色等
License:MIT協議(免費可商用)。
實例地址:http://www.humblesoftware.com/flotr2/index
十三. jQuery Visualize Plugin
支持的圖表: 線形圖,柱形圖,餅形圖,面積圖。
瀏覽器支持: IE9+,Firefox 2,firefox 3.5, Safari 3+, Opera 9,Google Chrome
功能特性:
-
- 利用HTML5 Canvas將table表格內容轉換成圖表的jquery插件。可以設置圖表標題,高度/寬度,顏色等。
- 該插件提供了一個簡單的$('table').visualize() 方法
License:免費。
圖例:
十四. jQuery Sparklines(生成波形圖的jQuery插件)
支持的圖表: 線形圖,柱形圖,餅形圖,Tristate, Bullet, Box Plot。
瀏覽器支持: IE6+,Firefox 2,firefox 3.5+, Safari 3+, Opera 9+,Google Chrome
功能特性:
-
- 信息體積小和數據密度高的圖表,其特點是數據豐富,結構簡單,圖表小巧。
- 能夠在HTML或者Javasript中生成很小的行間圖表,對於顯示迷你圖表特別有優勢。
- 只使用1行來完成圖表生成。
- 自刷新。
- 在excel中,sparkline(迷你圖)是研究數據走勢的一個重要依據。
License:免費。
圖例:
十五. Circliful
支持的圖表: 制作圓形與半圓形數據統計效果圖。
瀏覽器支持:
功能特性:
1. 顯示的信息為圓形統計,不需要添加額外圖像文件
2. 基於HTML5 canvas 畫布和jQuery
3. 許多選項可以被設置為數據的屬性
4. fontawesome整合。
使用方法:
1. 將jquery.circlify.css以及jQuery庫、jquery.circliful.min.js引入到網頁head中
2. 添加一個唯一的id到頁面中
3. 在網頁底部添加調用方法的js即可。
License:免費。
圖例:
十六. Arbor
支持的圖表: 力導向圖(3D)。
瀏覽器支持: IE9+,Firefox,Chrome等較新瀏覽器
功能特性:(使用前需要引入包jquery庫和hashmap.js)
-
- 使用了HTML的canvas元素,利用 Web Works 和 jQuery 創建可視化圖形庫。
- 為圖形組織和屏幕刷新處理提供了一個高效的、力導向的布局算法。
License:MIT協議(免費可商用)。
圖例和地址:http://arborjs.org/
十七. JsPlumb
支持的圖表: 連線圖。
瀏覽器支持: 支持IE6以上以及各大瀏覽器,但是仍然有一些bug
-
- 在IE9S上,由於jQuery1.6.x和1.7.x的SVG相關實現有一個bug,會導致鼠標停留事件無法響應
- Safari5.1上有一個SVG的bug,會導致鼠標事件無法通過SVG元素的透明區域傳遞
- Firefox11上基於MooTools使用SVG時會出現一些問題
功能特性:
-
- 一個強大的JavaScript連線庫,可以將html中的元素用箭頭、曲線、直線等連接起來
- 動態可擴展的,可以一邊異步加載數據一邊繪制拓撲圖
- 所有影響節點位置、布局的配置均放置在最前面, 便於修改
- 引入jsPlumb的同時,還需要引入jQuery和jQuery UI。
- jsPlumb只兼容jQuery1.3.x及以上版本,並在jQuery UI 1.7.x、1.8.x及1.9.x上測試通過。另外,如果你使用1.7.x、1.8.x的jQuery UI,還需要額外引入jQuery UI Touch Punch。
License:MIT協議(免費可商用)。
實例地址:http://jsplumbtoolkit.com/demo/flowchart/dom.html