jQuery 圖表外掛(jquery.flot)使用
Flot是純Javascript實現的基於jQuery的圖表外掛，主要支援線狀圖和柱狀圖的繪製(通過外掛也可以支援餅狀圖)。
它的特點是使用簡單、圖形美觀，支援滑鼠跟蹤及縮放功能。
Flot是基於canvas進行圖表的繪製，可以在IE6+/Firefox2+/Safari3+/Opera9.5+/Chrome等主流瀏覽器上執行；其中IE9以下瀏覽器不支援canvas標記，需要額外引用excanvas庫(VML)來實現。
基本使用
首先，在頁面頭部引用指令碼：
| 1 2 3 |
<!--[if lte
IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
<script
src="js/jquery.min.js"></script>
<script
src="js/jquery.flot.min.js"></script>
|
在頁面中建立一個html標記，如div，然後通過樣式來指定圖表的大小：
| 1 |
<div id="placeholder"
style="width:600px;height:300px;"></div>
|
最後，在DOM Ready事件中呼叫Flot的繪製方法$.plot：
| 1 2 3 |
$(function ()
{
$.plot($("#placeholder"),
[[[0, 0], [1, 2]]]);
});
|
這樣就簡單的繪製了一條線。
資料格式
flot的資料格式是陣列，陣列中包含多個系列的資料，每個系列的資料對應一條線：
| 1 |
[
series1, series2, ... ] |
每一個系列的資料可以是一個數組或者物件。
陣列格式的資料，每一個點都是一個數組(分x/y軸)：
| 1 |
[
[x1, y1], [x2, y2], ... ]
|
如下定義了三個點：
| 1 |
[
[1, 3], [2, 14.01], [3.5, 3.14] ]
|
繪製圖表的時候，會把這三個點連線起來；假如中間有個點使用了空值即null，這個點的兩邊則不會連線起來：
| 1 |
[
[1, 3], [2, 14.01], null,
[3.5, 3.14], [5, 8] ]
|
需要注意的是，每個點的資料必須是數字，如果是字串，可能會得到奇怪的錯誤。
物件格式的資料，如下：
1
2
3
4
5
6
7
相關推薦jQuery 圖表外掛(jquery.flot)使用Flot是純Javascript實現的基於jQuery的圖表外掛，主要支援線狀圖和柱狀圖的繪製(通過外掛也可以支援餅狀圖)。 它的特點是使用簡單、圖形美觀，支援滑鼠跟蹤及縮放功能。 Flot是基於canvas進行圖表的繪製，可以在IE6+/Firefox2 jQuery圖表外掛 jqPlot實現餅狀圖<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en jQuery 圖表外掛 jqChart 使用繪製雷達圖轉載：http://blog.csdn.net/leixiaohua1020/article/details/12650055 可見支援的種類非常之多。在這裡我們使用一下Radar Area Chart（雷達圖）。使用方式如下： 引入必要的檔案，注意jQuery的js JavaScript操作SVG畫相簿：基於jquery的外掛jquery.svgmagic.js1.svgmagic.js外掛操作SVG方法： 示例：http://blog.csdn.net/linshutao/article/details/30053233 jquery.svgmagic.js地址：https://github.com/dirkgroenen/SV jQuery旋轉外掛jquery.rotate.js 讓圖片旋轉演示1 直接旋轉一個角度 $('#img1').rotate(45); 演示2 滑鼠移動效果 $('#img2').rotate({ bind : { mouseover : function(){ $(this).rotate({animateTo: 1 一款很好用的Jquery 列印外掛——jQuery.print.js在進行網頁開發中不可避免會使用到列印功能，下面就來學習一下一款簡單易用的外掛吧！ 配置引數 你可以在呼叫列印方法時傳入一些引數： $("#myElementId").print({ globalStyles:true,//是否包含父文件的樣式，預設為t 使用jQuery的外掛jquery.corner.js來實現圓角效果-詳解jquery.corner.js可以實現各種塊級元素的角效果，以下為演示，詳見jquery_corner.html中的註釋部分，並附百度盤下載 jquery_corner.html程式碼如下： 1 <!DOCTYPE html> 2 <html> 3 <head> jquery.flot圖表外掛使用Flot是純Javascript實現的基於jQuery的圖表外掛，主要支援線狀圖和柱狀圖的繪製(通過外掛也可以支援餅狀圖)。它的特點是使用簡單、圖形美觀，支援滑鼠跟蹤及縮放功能。Flot是基於canvas進行圖表的繪製，可以在IE6+/Firefox2+/Saf 【jQuery】相容IE6的圖表外掛Highcharts在網頁中有時候需要畫出統計圖，尤其是一些OA系統中，這樣能夠給各位看官一個直觀的資料顯示。圖表用很多東西都能畫出來，比如JSP可以利用JAVA本身就有的繪圖函式，php有jpgraph外掛，具體請看《【php】使用jpgraph完成投票系統的普通使用者部分》（點選開啟連結） 分頁外掛jquery.simplePagination.js使用筆記1. test_box.jsp頁面： <script type="text/javascript" src="${ctxJs}/jquery-1.7.2.min.js"></script> <script src="${ctxJs}/jquery.simpl 前端外掛jquery.singlePageNav.min.js(導航點選選單跳轉與點選縮放選單摺疊按鈕緩衝效果外掛)Bootstrap導航點選選單跳轉與點選縮放選單摺疊按鈕緩衝效果外掛jquery.singlePageNav.min.js 引入步驟： <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">< jquery開發外掛1.jQuery.extend(object);為擴充套件jQuery類本身.為類新增新的方法。 2.jQuery.fn.extend(object);給jQuery物件新增方法。 jQuery便是一個封裝得非常好的'類'，比如我們用 語句$("#div1")會生成一個 jQuery jQuery列印外掛JQPRINT分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！ 獲取表單內的所有元素的值 表單格式化外掛jquery.serializeJSON簡單描述：一個form表單裡有十幾個input或者select，要獲取到他們的值，我的做法一直都是$("#id").val();這樣做本來沒什麼說的，但是如果有很多呢，就很麻煩，看了同事的一段程式碼，很亮眼(其實 是我菜 ヾ(◍°∇°◍)ﾉﾞ，沒見過這種寫法) 簡介：序列化form表單的資料成JS物件。 jquery.validate 外掛使用jQuery.validate外掛是一個簡單易用的外掛，主要作用是在表單提交前進行相關輸入專案的有效性 驗證，驗證通過提交表單，否則提示錯誤；但需要特別注意的是，凡是需要採用該外掛驗證的表單項，均需要定義html的name屬性資訊，且和id值的定義一致，才能達到有效性驗證目的 //======= jQuery-ui外掛datepicker的引數使用詳解轉載：https://blog.csdn.net/hliq5399/article/details/22406989 概述 日期選擇外掛是一個配置靈活的外掛，你可以定義它的展示方式，包括日期格式、語言、限制選擇日期範圍、新增相關按鈕以及其它導航等。 基於jQuery日曆外掛製作日曆這篇文章主要介紹了基於jQuery日曆外掛製作日曆的相關資料,需要的朋友可以參考下 來看下最終效果圖吧： 是長得醜了一點，不要吐槽我-。- 首先來說說這個日曆主要的製作邏輯吧： ·一個月份最多有31天，需要一個7X6的表格去裝載 ·如果知道了某個月份1號是星期幾，這個月份有多少天，一個迴圈就可以顯示某個月的 lightslider-支援移動觸控的輕量級jQuery幻燈片外掛外掛簡介 lightslider是一款輕量級的響應式jQuery幻燈片外掛。lightslider幻燈片外掛能夠支援移動觸控裝置，它可以製作為帶縮圖的內容幻燈片，或者製作為無限迴圈的旋轉木馬。它的特點還有： 下載地址 線上演示 下載地址：http://www.jqhtml.com/5633.html jQuery幻燈片外掛Owl Carousel外掛簡介 Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片外掛，它具有一下特點： 相容所有瀏覽器 支援響應式 支援 CSS3 過度 支援觸控事件 支援 JSON 及自定義 JSON 格式 支援進度條 支援自定義事件 JS-- jQuery遮罩外掛 jquery.blockUI.jsOverview jQuery BlockUI 外掛可以在不同鎖定瀏覽器的同時，模擬同步模式下發起Ajax請求的行為。該外掛啟用時，會組織使用者在頁面進行的操作，直到外掛被關閉。BlockUI通過向DOM中新增元素實現其外觀和組織使用者互動的行為。 使用jQuery Blo |