快捷導(dǎo)航

jqPlot jquery的頁面圖表繪制工具

更新時(shí)間：2009年07月25日 14:15:09 作者：

可能是個(gè)人認(rèn)識(shí)能力有限，一直認(rèn)為僅僅靠html是很難展現(xiàn)稍具動(dòng)態(tài)的圖表的，但是在看到j(luò)qPlot之后，我的認(rèn)識(shí)有了很大改變，jqplpt——基于HTML的圖表展示插件，而且不生成圖片，最可貴的是能生成類似flex的數(shù)據(jù)動(dòng)態(tài)提示以及動(dòng)態(tài)改變數(shù)據(jù)展示范圍等等。

jqplot是基于一個(gè)基本的jqplot.js文件，并有多個(gè)js文件支持的插件——也就是說jqplot.js文件只能支持線狀圖的繪制，對(duì)于餅狀圖，柱狀圖等圖形需要引入pieRenderer.js等文件。
這里參照jqPlot的官方文檔，以餅狀圖為例簡(jiǎn)單的說一下jqPlot的用法：
第一步，引入js文件（如果是畫線狀圖之外的其他圖表，需要引入相關(guān)js文件，這里引入餅狀圖文件pieRenderer）

復(fù)制代碼代碼如下:

 
<!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]--> 
<link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" /> 
<script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script> 
<script language="javascript" type="text/javascript" src="./plugins/jqplot.pieRenderer.js"></script> 

第二步，增加一個(gè)圖表展示區(qū)域的容器

復(fù)制代碼代碼如下:

 
<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div> 

第三步，獲取數(shù)據(jù)

復(fù)制代碼代碼如下:

 
line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]]; 

第四步，配置Option對(duì)象，并創(chuàng)建圖表

復(fù)制代碼代碼如下:

 
$.jqplot('chart', [line1], { 
title:'pieRenderer ',//設(shè)置餅狀圖的標(biāo)題 
seriesDefaults: {fill: true, 
showMarker: false, 
shadow: false, 
renderer:$.jqplot.PieRenderer, 
rendererOptions:{ 
diameter: undefined, // 設(shè)置餅的直徑 
padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離，變相該表餅的直徑 
sliceMargin: 9, // 餅的每個(gè)部分之間的距離 
fill:true, // 設(shè)置餅的每部分被填充的狀態(tài) 
shadow:true, //為餅的每個(gè)部分的邊框設(shè)置陰影，以突出其立體效果 
shadowOffset: 2, //設(shè)置陰影區(qū)域偏移出餅的每部分邊框的距離 
shadowDepth: 5, // 設(shè)置陰影區(qū)域的深度 
shadowAlpha: 0.07 // 設(shè)置陰影區(qū)域的透明度 
} 
}, 
legend:{ 
show: true,//設(shè)置是否出現(xiàn)分類名稱框（即所有分類的名稱出現(xiàn)在圖的某個(gè)位置） 
location: 'ne', // 分類名稱框出現(xiàn)位置, nw, n, ne, e, se, s, sw, w. 
xoffset: 12, // 分類名稱框距圖表區(qū)域上邊框的距離（單位px） 
yoffset: 12, // 分類名稱框距圖表區(qū)域左邊框的距離(單位px) 
} 
}); 

完整的代碼如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Simple Test</title> 
<!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]--> 
<link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" /> 
<script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script> 
<script language="javascript" type="text/javascript" src="./plugins/jqplot.pieRenderer.js"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]]; 
plot1 = $.jqplot('chart', [line1], { 
title:'pieRenderer ',//設(shè)置餅狀圖的標(biāo)題 
seriesDefaults: {fill: true, 
showMarker: false, 
shadow: false, 
renderer:$.jqplot.PieRenderer, 
rendererOptions:{ 
diameter: undefined, // 設(shè)置餅的直徑 
padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離，變相該表餅的直徑 
sliceMargin: 9, // 餅的每個(gè)部分之間的距離 
fill:true, // 設(shè)置餅的每部分被填充的狀態(tài) 
shadow:true, //為餅的每個(gè)部分的邊框設(shè)置陰影，以突出其立體效果 
shadowOffset: 2, //設(shè)置陰影區(qū)域偏移出餅的每部分邊框的距離 
shadowDepth: 5, // 設(shè)置陰影區(qū)域的深度 
shadowAlpha: 0.07 // 設(shè)置陰影區(qū)域的透明度 
} 
}, 
legend:{ 
show: true,//設(shè)置是否出現(xiàn)分類名稱框（即所有分類的名稱出現(xiàn)在圖的某個(gè)位置） 
location: 'ne', // 分類名稱框出現(xiàn)位置, nw, n, ne, e, se, s, sw, w. 
xoffset: 12, // 分類名稱框距圖表區(qū)域上邊框的距離（單位px） 
yoffset: 12, // 分類名稱框距圖表區(qū)域左邊框的距離(單位px) 
} 
}); 
}); 
</script> 
</head> 
<body> 
<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div> 
</body> 
</html> 