jQuery插件 Jqplot圖表實(shí)例
更新時(shí)間：2016年06月18日 14:47:01 作者：酷小孩
文章內(nèi)容為初次使用Jqplot圖表插件的測(cè)試代碼，僅供參考。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="js/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
<script src="js/jqplot/jquery.min.js"></script>
<script src="js/jqplot/jquery.jqplot.min.js"></script>
<script src="js/jqplot/excanvas.min.js"></script>
<script src="js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.cursor.min.js"></script>
<script src="js/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script src="js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script>
$(function () {
//--------------官網(wǎng)---------------------------
// var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 4, 6, 8, 2, 5]]);
//----------------實(shí)例 -------------------------
// var ticks = ['20110915', '20111024', '20111003', '20111008', '20111020', '20111012', '20110914', '20111029', '20111004', '20111022', '20111019', '20111017', '20111026', '20111005', '20110912', '20110903', '20110911', '20110923', '20111016', '20111001', '20110904', '20110924', '20110918', '20111021', '20111011', '20111030', '20110908', '20110913', '20110928', '20111025', '20110921', '20111002', '20111028', '20110906', '20110926', '20111018', '20110905', '20111007', '20111013', '20110907', '20110916', '20110927', '20111027', '20110902', '20110922', '20111006', '20111010', '20110910', '20111023', '20110919', '20110930', '20110917', '20110920', '20111009', '20111015', '20110909', '20110925', '20110929', '20111014', '22'];
var tick2 = ['20110915', '20111024', '20111003', '20111008', '20111020', '20111012', '20110914', '20111029', '20111004', '20111022'];
//var b1 = [46.84, 59.87, 103.42, 62.80, 67.72, 32.59, 54.91, 109.06, 79.68, 83.99, 56.27, 59.23, 68.53, 60.45, 78.47, 62.24, 91.62, 39.38, 52.76, 122.34, 95.84, 81.85, 72.62, 69.30, 49.76, 78.07, 36.22, 44.18, 88.87, 72.65, 49.90, 140.91, 75.52, 64.64, 63.31, 73.33, 65.53, 69.31, 56.26, 51.32, 50.53, 81.99, 74.16, 31.04, 41.95, 64.09, 65.85, 73.88, 91.34, 67.09, 93.91, 65.96, 52.86, 41.03, 67.93, 72.25, 74.18, 103.10, 51.57, 55.74]; //子統(tǒng)計(jì)1數(shù)據(jù)
var b2 = [46.84, 59.87, 103.42, 62.80, 67.72, 32.59, 54.91, 109.06, 79.68, 83.99];
var plot2 = $.jqplot('chart2', [b2], {
title: '2011-9到2011-10月現(xiàn)金收益（元）',
legend: { show: true, location: 'ne' }, //提示工具欄--show：是否顯示,location: 顯示位置 (e:東,w:西,s:南,n:北,nw:西北,ne:東北,sw:西南,se:東南)
series: [
{
label: '現(xiàn)金收益',
// lineWidth: 8, //線條粗細(xì)
markerOptions: { size: 9, style: "circle" } // 節(jié)點(diǎn)配置
}
], //提示工具欄
//captureRightClick: true,//禁用右鍵
seriesDefaults: {
pointLabels: { show: true, ypadding: -1 } //數(shù)據(jù)點(diǎn)標(biāo)簽
//renderer: $.jqplot.BarRenderer, //使用柱狀圖表示
//柱狀體組之間間隔
//rendererOptions: {barMargin: 25}
},
axes: {
xaxis: {
label: "日期", //x軸顯示標(biāo)題
pad: 5,
renderer: $.jqplot.CategoryAxisRenderer, //x軸繪制方式
tickInterval: '1day',
ticks: tick2,
tickOptions: {
fontSize: '10pt'
},
mark: 'cross'
},
yaxis: {
label: "現(xiàn)金", // y軸顯示標(biāo)題
min: 0,
//tickInterval: 10, //網(wǎng)格線間隔大小
tickOptions: { formatString: '%.2f', fontSize: '10pt' }
}
}
});
//-----------------測(cè)試 折線圖------------------------
var cosPoints = [
['20140701', 23],
['20140702', 12.6],
['20140703', 45.2],
['20140704', 12.6],
['20140705', 10],
['20140706', 8.6],
['20140707', 23.2],
['20140708', 12.6],
];
var plot3 = $.jqplot('chart1', [cosPoints], {
title: '消費(fèi)水平', //標(biāo)題
legend: { show: true, location: 'ne' }, //提示工具欄--show：是否顯示,location: 顯示位置 (e:東,w:西,s:南,n:北,nw:西北,ne:東北,sw:西南,se:東南)
//series: [{showMarker:true}],
axesDefaults: { //軸的刻度值，字體大小，字體類型，字體角度
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
// labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
//fontSize: '10pt',
angle: 20
}
},
seriesDefaults: {
label: '消費(fèi)值', //分類名稱
color: 'red', //分類在圖標(biāo)中表示（折現(xiàn)，柱狀圖等）的顏色
//showLine: true, //是否顯示圖表中的折線（折線圖中的折線）
//markerOptions: {
// show:true
//}
showMarker: true, //是否顯示節(jié)點(diǎn)
pointLabels: {
show: true,//數(shù)據(jù)點(diǎn)標(biāo)簽
// edgeTolerance:1
}
},
axes: {
xaxis: {
label: '日期',
renderer: $.jqplot.CategoryAxisRenderer,
// readerer:$.jqplot.DateAxisRenderer,
// tickInterval: 'lday',
labelOptions: {
//formatString:'%Y-%m-%d',
fontSize: '12pt'
}
},
yaxis: {
label: '現(xiàn)金',
//autoscale: true,
min: 0,
tickOptions: { formatString: '%.2f', fontSize: '10pt' }
}
}
});
//--------------------測(cè)試 提示文字的傾斜角度---------------------
var line3 = [['20140701', 7], ['20140702', 9], ['20140703', 15],
['20140704', 12], ['20140705', 3],
['20140706', 6], ['20140707', 18]];
var plot3 = $.jqplot('chart3', [line3], {
title: 'Concern vs. Occurrance',
// series: [{ renderer: $.jqplot.BarRenderer }],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 10, //傾斜角度
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
//--------------------測(cè)試 節(jié)點(diǎn)高亮顯示---------------------
var line4 = [['20140701', 7], ['20140702', 9], ['20140703', 15],
['20140704', 12], ['20140705', 3],
['20140706', 6], ['20140707', 18]];
var plot4 = $.jqplot('chart4', [line4], {
seriesDefaults: {
label: '消費(fèi)值', //分類名稱
pointLabels: {
show: true,//數(shù)據(jù)點(diǎn)標(biāo)簽
// edgeTolerance:1
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
//formatString: '%b %#d'
}
},
yaxis: {
tickOptions: {
// formatString: '$%.2f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 5, // 當(dāng)鼠標(biāo)移動(dòng)到數(shù)據(jù)點(diǎn)上時(shí)，數(shù)據(jù)點(diǎn)擴(kuò)大的增量
fadeTooltip: true,// 設(shè)置提示信息欄出現(xiàn)和消失的方式（是否淡入淡出）
//lineWidthAdjust: 2.5, //當(dāng)鼠標(biāo)移動(dòng)到放大的數(shù)據(jù)點(diǎn)上時(shí)，設(shè)置增大的數(shù)據(jù)點(diǎn)的寬度
tooltipOffset: 2, // 提示信息欄據(jù)被高亮顯示的數(shù)據(jù)點(diǎn)的偏移位置，以像素計(jì)
//tooltipLocation: 'nw' // 提示信息顯示位置（英文方向的首寫字母）: n, ne, e, se, s, sw, w, nw.
},
cursor: {
show: false,
showTooltip: true, // 是否顯示提示信息欄
followMouse: true, //光標(biāo)的提示信息欄是否隨光標(biāo)（鼠標(biāo)）一起移動(dòng)
//tooltipLocation: 'se', // 光標(biāo)提示信息欄的位置設(shè)置。如果followMouse=true,那么該位置為
//提示信息欄相對(duì)于光標(biāo)的位置。否則，為光標(biāo)提示信息欄在圖標(biāo)中的位置
// 該屬性可選值： n, ne, e, se, etc.
tooltipOffset: 6, //提示信息欄距鼠標(biāo)(followMouse=true)或坐標(biāo)軸（followMouse=false）的位置
}
});
//--------------------測(cè)試 Ajax數(shù)據(jù)調(diào)用（未深入測(cè)試）---------------------
var ajaxDataRenderer=function (url,plot,options) {
var ret=null;
$.ajax({
url:url,
async:false,//注意 一定要為false
dataType:"json",
success:function(data){
ret=data;
}
});
return ret;
};
//數(shù)據(jù)請(qǐng)求路徑
var jsonurl = "DataHandler.ashx"; //返回?cái)?shù)據(jù)： [[2,4,6,8,9,6]]
var plot5 = $.jqplot('chart5', jsonurl, {
dataRenderer: ajaxDataRenderer, //數(shù)據(jù)回調(diào)函數(shù)
dataRendererOptions: {
unusedOptionalUrl:jsonurl
}
});
})
</script>
</head>
<body>
<div id="chart2" style="width: 1000px; height: 400px;"></div>
<hr />
<div id="chart1" style="height: 300px; width: 500px;"></div>
<br />
<div id="chart3" style="height: 300px; width: 500px;"></div>
<br />
<div id="chart4" style="height: 300px; width: 500px;"></div>
<br />
<div id="chart5" style="height: 300px; width: 500px;"></div>
</body>
</html>
效果如下：
以上就是本文的全部?jī)?nèi)容，希望能幫到大家，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 快速解決FusionCharts聯(lián)動(dòng)的中文亂碼問題
- JSP FusionCharts Free顯示圖表 具體實(shí)現(xiàn)
- FusionCharts圖表顯示雙Y軸雙(多)曲線
- jQuery插件slicebox實(shí)現(xiàn)3D動(dòng)畫圖片輪播切換特效
- 神奇的7個(gè)jQuery 3D插件整理
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
- jquery dataview數(shù)據(jù)視圖插件使用方法
- jQuery的圖片輪播插件PgwSlideshow使用詳解
- jqPlot jQuery繪圖插件的使用
- jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫（附源碼下載）
- 使用jQuery jqPlot插件繪制柱狀圖
- jQuery插件FusionCharts繪制的3D餅狀圖效果實(shí)例【附demo源碼下載】
相關(guān)文章
JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁腳
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁眉或頁腳內(nèi)部。本文給大家介紹JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁腳的相關(guān)知識(shí)，需要的朋友參考下吧2016-03-03
這篇文章主要介紹了jQuery中parent()方法用法,實(shí)例分析了parent()方法的功能、定義及取得緊鄰父元素的使用技巧,需要的朋友可以參考下2015-01-01
文本有關(guān)的樣式和jQuery求對(duì)象的高寬問題分別說明
有關(guān)文處理本有關(guān)的問題WEB開發(fā)經(jīng)常會(huì)用到，這里結(jié)合使用情況總結(jié)一下，同時(shí)還有jQuery求對(duì)象的高度問題，下面為大家本別講解下2013-08-08
jQuery height()、innerHeight()、outerHeight()函數(shù)的區(qū)別詳解
這篇文章主要介紹了jQuery height()、innerHeight()、outerHeight()函數(shù)的區(qū)別詳解,需要的朋友可以參考下2016-05-05
Jquery cookie插件實(shí)現(xiàn)原理代碼解析
這篇文章主要介紹了Jquery cookie插件實(shí)現(xiàn)原理代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
Jquery+WebService 校驗(yàn)賬號(hào)是否已被注冊(cè)的代碼
在Javascirpt代碼中，調(diào)用Jquery的方法$.Ajax(function)實(shí)現(xiàn)Ajax,傳遞賬號(hào)信息給Web服務(wù)，Web服務(wù)再調(diào)用數(shù)據(jù)庫操作類查詢數(shù)據(jù)庫，并返回?cái)?shù)據(jù)給前臺(tái)頁面。2010-07-07
jQuery實(shí)現(xiàn)判斷上傳圖片類型和大小的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷上傳圖片類型和大小的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)上傳圖片屬性獲取、判定相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
起初以為this和$(this)就是一模子刻出來。但是我在閱讀時(shí)，和coding時(shí)發(fā)現(xiàn),總不是一回事。2009-08-08
本篇文章小編為大家介紹，關(guān)于jquery css的使用介紹。需要的朋友參考下2013-04-04