|
|
這里參照jqPlot的官方文檔，以餅狀圖為例簡單的說一下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>
生成圖表展示如下：
下面是一些其他類型的圖標(biāo)的截圖：
1.多縱軸圖
2.帶提示信息的甘特圖
3.以table方式展示提示信息的甘特圖
4.帶提示信息的線狀圖（可拖動(dòng)）
JavaScript技術(shù)：jqPlot jquery的頁面圖表繪制工具，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
