6個jQuery圖表Web應用擴充套件
隨著jQuery、Mootools、prototype等知名的JavaScript框架的應用變的越來越強大,瀏覽器對最新版本CSS屬性的支援,除去頁面中Flash的應用之外,圖表應用變的越來越廣泛實用。本文為你整理了6個實用性強的jQuery圖表外掛,概述了它們各自的功用和優勢。
1、Flot
從互動性的層面來說,jQuery實現的 Flot圖表和Flash實現的圖表效果已經是非常的接近。圖表輸出效果相當的流暢光滑,注重視覺效果。你也可以和data points資料節點配合使用,當滑鼠hover到某個資料節點時,會得到對應節點的數值說明內容的反饋資訊。
如上圖所示,你也可以選擇圖表的一部分內容,獲得這些特殊區域的資料;同時,你還可以對資料節點進行放大處理。
*優勢: *線條、節點、區域填充、柱狀圖以及以上功能的組合。
Sparklines 是我最欣賞的微型圖表實現工具。真正實現了儀表風格的圖表樣式(登入到你的 Google Analytics 就知道什麼樣子了)。另外一個好的功用就是,可以幫助在所有的圖表外掛中實現 self-refresh 的能力。
*優勢:* 楔形、線條、柱狀圖以及以上功能的組合。
Google Charts plugin 是通過jQuery外掛將Google Charts API應用到Web程式的一個非常簡單的方式。同時,這個 API 本身也是非常的簡單易用 。允許使用簡單的jQuery呼叫,設定你自己需要的引數:
.attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}))
*優勢:* 柱狀圖、重疊柱狀圖、線條、楔形、3D楔形。
4,
0.21
jQuery Chart 0.21看起來似乎並不是一個特別好看的圖表外掛。實現的也是基本的功能,但它的使用卻是非常靈活、易用的。
例項(新增值給圖表)
.chartAdd({“label”:”Leads”,”type”:”Line”,”color”:”#008800″,”values”:[“100″,”124″,”222″,”44″,”123″,”23″,”99″]})
優勢: 區塊、線條、柱狀圖以及以上功能的組合。
jQchart 可以實現在圖表中的拖拽動作和動畫轉換功能。如果你的CSS應用夠好,可以實現外觀不錯的圖表效果。與其他外掛相比,jQchart的實現功能似乎有些單一。
優勢: 柱狀圖、線條
Tuftegraph 生成的柱狀圖漂亮精緻,而且可以實現層疊效果。相比Flot 的精緻小巧,Tuftegraph也可以實現自身的減壓,變得更加輕便。
優勢: 柱狀圖、重疊柱狀圖。
以上6中同樣通過jQuery實現的圖表效果,卻各有各的優勢和侷限,你可以根據自身專案的需求,有選擇性地使用,我們的原則就是:簡單、實用、相容性強。
相關推薦
6個jQuery圖表Web應用擴充套件
隨著jQuery、Mootools、prototype等知名的JavaScript框架的應用變的越來越強大,瀏覽器對最新版本CSS屬性的支援,除去頁面中Flash的應用之外,圖表應用變的越來越廣泛實用。本文為你整理了6個實用性強的jQuery圖表外掛,概述了它們各自的功用和優勢。 1、Fl
【J2EE十三個規範】Web應用層之JSP和Servlet
【學習概要】 本篇部落格開始將會開始總結J2EE十三個規範的內容,在學習完十三個規範之後,巨集觀梳理了一遍,將其進行歸類和聯絡,十三個規範是什麼是必須要知道的。下面我們就從Web應用層開始。
web前端學習(五)(6)-- jQuery的擴充套件與noConflict
1、jQuery的擴充套件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
關於Django Web應用架構設計開發的幾個問題
依賴 實際應用 解決辦法 會有 簡單的 upd 嵌套 有用 缺點 1、關於分層,做過傳統JEE應用的同學肯定知道JEE應用會分很多個設計層。根據傳統Web應用架構設計一般從上到下分這麽幾個層(太懶了,不畫圖了):Web前端層、Web後端交互層、業務層、基礎數據設施層,Web
(轉)基於MVC4+EasyUI的Web開發框架經驗總結(6)--在頁面中應用下拉列表的處理
ica new web開發 don ext images 如果 bob 獲取 http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,
HTML5開發移動web應用—JQuery Mobile(1)
框架 one 樣式 手機 div pre 都是 指定 學習 JQuery Mobile是一個簡單易用的web移動app開發框架。使用它就像使用jQuery一樣,引入必要的文件就可以。 最基礎的jQuery Mobile文件的結構代碼例如以下: <bod
高效Web開發的10個jQuery代碼片段
() 檢測 滑動 agen animate toolbar 自動添加 屬性 span 在過去的幾年中,jQuery一直是使用最為廣泛的JavaScript腳本庫。今天我們將為各位Web開發者提供10個最實用的jQuery代碼片段,有需要的開發者可以保存起來。 1、檢測In
同一臺服務器部署多個WEB應用,SESSION沖突的解決方法
tex con ont docbase 部署 標簽頁 框架 eba webapp 由於一臺服務器上使用Tomcat部署多個WEB項目,而項目因為用到框架都是一樣的,導致同時運行,session相互沖突,這個登錄後,那個就得重新登錄,造成了使用不方便,解決辦法如下: 在
Framework7 3.6.1 釋出,跨平臺移動混合與 Web 應用框架
Framework7 3.6.1 釋出了,Framework7 是一個開源的全功能 HTML 框架,用於構建具有 iOS 和 Android 原生外觀的混合移動應用程式或 Web 應用程式。同時 Framework7 也是獨立的原型應用工具。Framework7
6、CentOS7 安裝Docker之擴充套件(三個技巧,將Docker映象體積減小90%)
三個技巧,將Docker映象體積減小90% 在構建Docker容器時,應該儘量想辦法獲得體積更小的映象,因為傳輸和部署體積較小的映象速度更快。 但RUN語句總是會建立一個新層,而且在生成映象之前還需要使用很多中間檔案,在這種情況下,該如何獲得體積更小的映象呢? 你可能
IntelliJ IDEA web應用程式 index.jsp中引用jquery,測試總是無法成功,已解決
首先感謝以下帖子的內容 https://bbs.csdn.net/topics/392054905 使用的版本是IntelliJ IDEA 2018.3.1 以下方式寫入引用路徑 <script type="text/javascript" src="${pageContext
Web應用架構入門之11個基本要素
譯者: 讀完這篇部落格,你就可以回答一個經典的面試題:當你訪問Google時,到底發生了什麼? 原文:Web Architecture 101 譯者:Fundebug 為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用於學習。 當我
一臺伺服器多個WEB應用,SESSION衝突的解決方法
最近在客戶機器上部署系統,由於一臺伺服器上需要部署多個專案,而我們的WEB專案因為用到框架都是一樣的,導致同時執行,session相互衝突,這個登入後,那個就得重新登入,造成了使用不方便,我們的解決辦法如下: 對於tomcat7,可以這樣: 在server.xml檔案,ho
Java web測試分為6個部分
1、功能測試 2、效能測試(包括負載/壓力測試)3、使用者介面測試 4、 相容性測試 5、 安全測試 6、介面測試 1 功能測試 1.1 連結測試 連結測試可分為三個方面。 首先,測試所有連結是否按連結項描述的那樣確實連結到了該連結的頁面; 其次,測試所連結的頁面是
當“伺服器上部署多個Web應用”,使用Nginx反向代理配置
當同一伺服器上部署了多個不同的web應用時,可以使用Nginx進行管理配置。 舉個例子:假如 www.aabbccdd.com 站點有好幾個web App(web應用): finance(金融)、product(產品)、admin(使用者中心)。 訪問這些應用的方式通過
未來的 Web:九個不可思議的 WebGL 應用試驗
WebGL 技術允許把 JavaScript 和 OpenGL ES 2.0 結合在一起,通過增加 OpenGL ES 2.0 的一個 JavaScript 繫結,WebGL 可以為 HTML5 Canvas 元素提供硬體 3D 加速渲染,這樣 Web 開發人員就可以藉助系統顯示卡來在瀏覽器裡更流暢地展示
提高Web端頁面載入速度的6個方法
阿伯丁集團曾對使用者進行調查,結果顯示,網站頁面載入時間每延長1秒,就會減少11%的頁面瀏覽量,降低16%的客戶滿意度,降低7%的轉化率。亞馬遜也通過調查證實,網頁開啟的速度每提高100毫秒,能為網站增多1%的收益。類似的證實還有很多,網頁開啟的速度直接關係到網站的收益,已毋庸置疑。 這就是為什麼
在linux系統CentOS 6.6 64位上安裝部署jetty和執行web應用
1. 在linux系統CentOS 6.6 64 預設Java是openSDK,需要下載sun的JavaSDK, http://www.oracle.com/technetwork/java/javase/downloads/index.html 安裝好後,配置相應的j
同一個tomcat多個web應用共享session
tomcat版本:apache-tomcat-6.0.29(次方tomcat6和tomcat7支援) 1.修改D:\apache-tomcat-6.0.29\conf\server.xml檔案 由於每個app都有一個唯一的一個ServletContext 例項物件,下面的所有的servlet 共享此
Adobe Flash Builder 4.6+Apache Tomcat 7+Myeclipse2013+blazeDS4.0搭建遠端端Flex端WEB應用程式
如果使用FLEX開發過程序那麼你肯定有一個問題是這樣的,如何與後臺資料庫的交。目前有一下三種方式: 1、LCDS(blazeDS) 2、Http Service 3、Web Service 如果是和.NET互動使用Web Service方式較多,對於一些普通