2. 程式人生 > >圖表插件

圖表插件

阿新 • • 發佈：2018-07-15
software chart ima 影響 網格 stat dem hash 較高的

一. 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+

功能特性：

    1. Jquery插件，采用Canvas繪制圖形，簡單易用,IE8以下不支持HTML5 canvas標簽, 加入ExplorerCanvas插件(excanvas.min.js)就可以正常顯示圖表。
    2. 實現了矩陣基本計算以及很多的概率統計函數。
    3. 支持放大縮小以及鼠標追蹤等交互功能。
    4. Flot的API設計得很簡潔，所以需要額外學習的東西也很少，馬上就可以上手使用。
    5. 迷人的外觀和交互式特性
    6. 支持有限的視覺形式，但使用很簡單

License：MIT協議（免費可商用）。

實例地址：http://www.flotcharts.org/flot/examples/

六. Amcharts

支持的圖表： 線形圖，柱狀圖，條形圖，面積圖，燭臺圖，雷達等基本圖形，甚至股票圖表

瀏覽器支持： IE6+，Firefox 2.0+，Safari 3+，Opera 9，Konqueror 4+

功能特性：

    1. amCharts在1.x版本是基於flash實現，目前2.x版本改為Javascript/HTML5實現。
    2. 動畫或靜態，價值軸能夠扭轉。
    3. 數據可自動重裝上陣與預設頻率。

License：可以免費下載並使用一切Amcharts產品。但免費版有一個限制，會在圖表的左上角顯示該網站的鏈。如果想移除這個鏈接，需要購買商業許可。

實例地址：

http://www.amcharts.com/demos-new/?utm_expid=43837746-1.GddUzlQrSOyQRcN3ZwSMcw.1&utm_referrer=http%3A%2F%2Fwww.amcharts.com%2Fdemos-new%2F

七.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

功能特性：

    1. 非常快速的，支持大型數據集的互動和動畫的動態行為。
    2. 一個數據的API，專註於數據。將數據與網頁中的svg元素綁定起來，然後進行一定的操作
    3. 不兼容老版本的瀏覽器。

License：BSD協議（免費可商用）。

實例地址：https://github.com/mbostock/d3/wiki/Gallery

技術分享圖片

九. RGraph

支持的圖表： 支持超過20多種不同類型的圖表。

柱狀圖，極區圖，圓環圖，油量表，測量表，甘特圖，水平柱狀圖，水平進度條圖，網格圖，線圖，路程圖(半環），裏程表（全環），餅圖，雷達圖，玫瑰圖，輻射圖，散形圖，溫度計，豎直進度條，瀑布圖。

瀏覽器支持： 所有支持html5的瀏覽器。IE 7/8 需要引入ExCanvas.

功能特性：

    1. 生成的Chart具有可交互性
    2. 當鼠標點擊或移過時會顯示相應的信息
    3. 以動態加載Chart或對特殊點進行縮放

License：非商業使用上免費，若商業使用則需要付費。

實例地址：http://www.rgraph.net/examples/index.html

十. CanvasXpress

支持的圖表： 柱狀圖，線狀圖，點狀圖，面積圖，堆積圖，熱點圖，餅狀圖等常見圖表類型。

瀏覽器支持： IE6.0+及所有支持html5的瀏覽器。

功能特性：

    1. 基於HTML5 canvas標簽實現的JavaScript圖表類庫，生成的圖表交互性很強
    2. 鼠標放上去時會動態顯示值
    3. 具有相當高的可定制性，可設置圖表文字、顏色和要顯示/隱藏的元素等
    4. 重要的一點是，雖然它使用了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。

功能特性：

    1. 用於繪制基於 HTML5 的圖形和圖表的開源 JavaScript 類庫，是圖表組件 flotr 的分支，但移除了 Prototype 框架的依賴並在其它功能上有很大的改進。
    2. 移動支持
    3. 獨立框架
    4. 可擴展的插件框架
    5. 定制性非常高，可自定義圖表類型，自定義標題、子標題、顏色等

License：MIT協議（免費可商用）。

實例地址：http://www.humblesoftware.com/flotr2/index

十三. jQuery Visualize Plugin

支持的圖表： 線形圖，柱形圖，餅形圖，面積圖。

瀏覽器支持： IE9+，Firefox 2，firefox 3.5， Safari 3+， Opera 9，Google Chrome

功能特性：

    1. 利用HTML5 Canvas將table表格內容轉換成圖表的jquery插件。可以設置圖表標題，高度/寬度，顏色等。
    2. 該插件提供了一個簡單的$(‘table‘).visualize() 方法

License：免費。

圖例：

技術分享圖片

十四. jQuery Sparklines（生成波形圖的jQuery插件）

支持的圖表： 線形圖，柱形圖，餅形圖，Tristate, Bullet, Box Plot。

瀏覽器支持： IE6+，Firefox 2，firefox 3.5+， Safari 3+， Opera 9+，Google Chrome

功能特性：

    1. 信息體積小和數據密度高的圖表，其特點是數據豐富，結構簡單，圖表小巧。
    2. 能夠在HTML或者Javasript中生成很小的行間圖表，對於顯示迷你圖表特別有優勢。
    3. 只使用1行來完成圖表生成。
    4. 自刷新。
    5. 在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)

    1. 使用了HTML的canvas元素,利用 Web Works 和 jQuery 創建可視化圖形庫。
    2. 為圖形組織和屏幕刷新處理提供了一個高效的、力導向的布局算法。

License：MIT協議（免費可商用）。

圖例和地址：http://arborjs.org/

技術分享圖片

十七. JsPlumb

支持的圖表： 連線圖。

瀏覽器支持： 支持IE6以上以及各大瀏覽器，但是仍然有一些bug

    1. 在IE9S上，由於jQuery1.6.x和1.7.x的SVG相關實現有一個bug，會導致鼠標停留事件無法響應
    2. Safari5.1上有一個SVG的bug，會導致鼠標事件無法通過SVG元素的透明區域傳遞
    3. Firefox11上基於MooTools使用SVG時會出現一些問題

功能特性：

    1. 一個強大的JavaScript連線庫,可以將html中的元素用箭頭、曲線、直線等連接起來
    2. 動態可擴展的,可以一邊異步加載數據一邊繪制拓撲圖
    3. 所有影響節點位置、布局的配置均放置在最前面， 便於修改
    4. 引入jsPlumb的同時，還需要引入jQuery和jQuery UI。
    5. 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

圖表插件

相關推薦

Highcharts圖表插件的簡單使用說明

javascrip 數據 font 範圍 csdn 1.0 b2c sep web Highcharts圖表控件是眼下使用最為廣泛的圖表控件。本文將從零開始逐步為你介紹Highcharts圖表控件。通過本文。你將學會怎樣配置Highcharts以及

ZingChart 圖表插件

www. info end value class new scrip char HR ZingChart提供了一個豐富的API，用於通過重新繪制繪圖（重新加載） ，加載新數據（setseriesdata），修改現有圖表（modifyplot）， 放大數據範圍（zoomto

圖表插件

software chart ima 影響 網格 stat dem hash 較高的 一. Highcharts 支持的圖表：曲線圖，柱狀圖，餅狀圖，區域圖，散狀點圖，綜合圖表。 瀏覽器支持：采用純JavaScript編寫，兼容所有的瀏覽器，Safari、IE6+、火狐和

圖表插件Highcharts的動態化賦值，實現圖表數據的動態化設置顯示

銷售 ttext style 5.6 不同的 .get con 差異 曲線圖 在很早之前就介紹過圖表插件Highcharts的使用了，在2014年的隨筆《基於MVC4+EasyUI的Web開發框架經驗總結（4）--使用圖表控件Highcharts》，這裏基本上都介紹的比較完

js統計圖表插件 Echarts

初始化 www itl tool doctype ref ron setoption htm Echarts 用於制作數據統計圖表，一個純 Javascript 的圖表庫，快捷簡便的生成統計圖表。 官網：https://www.echartsjs.com/ 效果 ht

JS插件：ECharts-數據圖表化-事件

準備 edi 完整 blank lec ext example feature 分享圖片 主要內容： tooltip.formatter / events.legendselectchanged 一、折線圖 echart官網 1. 先引入：echarts.common

tools-eclipse-001-如何安裝插件

manage 補充 jar 安裝eclipse 三種 菜單 多行 add 名稱 插件的安裝方法大體有以下三種： 第一種：直接復制法： 　　假設你的Eclipse的在（C:\eclipse), 解壓你下載的 eclipse 插件或者安裝eclipse 插件到指定目錄AA(c

第二百四十六節，Bootstrap彈出框和警告框插件

popover 事件 png div 數字 ott hid strong selector Bootstrap彈出框和警告框插件 學習要點： 　　1.彈出框 　　2.警告框 本節課我們主要學習一下 Bootstrap 中的彈出框和警告框插件。 一．彈出框 彈

js滾動加載小插件

pre span jquery 返回 名稱 fault container 接收 url 本文實例講述了jquery滾動加載數據的方法。分享給大家供大家參考。具體分析如下： 少廢話直接上代碼！！！粗暴，直接，幹脆 0//lk-2017-05-04 1(function

10個免費開源的JS音樂播放器插件

一個 很好 tle ef7 制作 obi tex ios開發者 選擇 音樂播放器在網頁設計中有時候會用到，比如一些時尚類、音樂或影視類等項目，但這些 網頁播放器 插件比較少見，所以這裏為大家整理一個集合，也許會有用到的時候。 下面整理的播放器有些是支持自適應的，如果需要

js自己定義插件-選項卡

.net char 例如 die 對象 tails gree eth end 該功能比較簡單。鞏固一下jquery插件寫法，註意引入的jquery.js 、 自己定義插件路徑代碼例如以下： 頁面： <!doctype html> <html>

自己封裝的一些簡單的jQuery插件

目標 browser 文本 nis targe arr nim function etc 　　俗話說的好：溫故而知新，可以為師矣！ 　　學習是一個人一輩子的事情。於是乎趁著今天休息，回顧了一些知識點，可能做的不夠完美，請多多指教。 /** * Created by Admi

Eclipse安裝svn插件的幾種方式 轉帖....

如果 version name feature help sin 鏈接 exe 文件 Eclipse安裝svn插件的幾種方式 1.在線安裝： (1).點擊 Help --> Install New Software... (2).在彈出的窗口中點擊add按鈕，輸

Linux下Elasticsearch5.0 head插件安裝

我們 kill 進程 gruntfile etc lin elastic 配置環境變量 -h 下載安裝包 　　下載elasticsearch-head 　　下載地址：https://github.com/mobz/elasticsearch-head (或者百度搜

debian下為firefox安裝flash插件

gin -s -name 插件安裝 linux. 在哪裏 name fire 找到 從Adobe官網下載flash：http://get.adobe.com/cn/flashplayer/ 我下載的版本是：flash_player_npapi_linux.x86_64.t

谷歌被墻，怎樣給谷歌瀏覽器加入迅雷下載插件

模式 ott 下載 chrome 程序 lan 宋體 能夠 font 首先須要下載這個迅雷下載插件。下載地址是：http://pan.baidu.com/s/1G0F2e 本來在谷歌的擴展程序裏面能夠搜索到這個插件的，但被墻了之後（）。訪問不了。也就下載不到了，辛虧在網

英文翻譯插件介紹

process asics sta 發現 perf 簡單 參考 top app 明確需求 開發一款插件最先要考慮的當然是它要實現什麽功能了。比如我想做的是varname-go-die主要功能就是讓開發者有時候遇到起變量名但是不知道英文怎麽拼時，不需要切換到翻譯軟件去查找再c

Vue.js 插件開發詳解

js 前言隨著 Vue.js 越來越火，Vue.js 的相關插件也在不斷的被貢獻出來，數不勝數。比如官方推薦的 vue-router、vuex 等，都是非常優秀的插件。但是我們更多的人還只停留在使用的階段，比較少自己開發。所以接下來會通過一個簡單的 vue-toast 插件，來了解掌握插件的開發和使用。

【轉】如何為Apache JMeter開發插件（一）

選擇 ref 測試結果 沒有 通過 pri for entry state 本文轉載於http://blog.csdn.net/column/details/12925.html，作者：xreztento 作者寫的很精華，我打算在此系列操作一遍後，加多點截圖，便於更多人更快

cordova跨平臺app開發02_自定義插件開發與安裝

xtend else callback 視頻 方法名 pty ges ray expect 視頻地址:http://t.cn/RacmXiy cordova的自定義插件由js、原生代碼文件（java、oc）、plugin.xml三部分組成。 cordvoa提供了命令來創