Jquery中文網 www.8833040.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jqPlot jquery的頁面圖表繪制工具

jqPlot jquery的頁面圖表繪制工具

發布時間:2013-09-13   編輯:www.8833040.live
可能是個人認識能力有限,一直認為僅僅靠html是很難展現稍具動態的圖表的,但是在看到jqPlot之后,我的認識有了很大改變,jqplpt——基于HTML的圖表展示插件,而且不生成圖片,最可貴的是能生成類似flex的數據動態提示以及動態改變數據展示范圍等等。
可能是個人認識能力有限,一直認為僅僅靠html是很難展現稍具動態的圖表的,但是在看到jqPlot之后,我的認識有了很大改變,jqplpt——基于HTML的圖表展示插件,而且不生成圖片,最可貴的是能生成類似flex的數據動態提示以及動態改變數據展示范圍等等。 jqplot是基于一個基本的jqplot.js文件,并有多個js文件支持的插件——也就是說jqplot.js文件只能支持線狀圖的繪制,對于餅狀圖,柱狀圖等圖形需要引入pieRenderer.js等文件。
這里參照jqPlot的官方文檔,以餅狀圖為例簡單的說一下jqPlot的用法:
第一步,引入js文件(如果是畫線狀圖之外的其他圖表,需要引入相關js文件,這里引入餅狀圖文件pieRenderer)
復制代碼 代碼如下:

<!--[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>

第二步,增加一個圖表展示區域的容器
復制代碼 代碼如下:

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

第三步,獲取數據
復制代碼 代碼如下:

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

第四步,配置Option對象,并創建圖表
復制代碼 代碼如下:

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

完整的代碼如下:
復制代碼 代碼如下:

<!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 ',//設置餅狀圖的標題
seriesDefaults: {fill: true,
showMarker: false,
shadow: false,
renderer:$.jqplot.PieRenderer,
rendererOptions:{
diameter: undefined, // 設置餅的直徑
padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離,變相該表餅的直徑
sliceMargin: 9, // 餅的每個部分之間的距離
fill:true, // 設置餅的每部分被填充的狀態
shadow:true, //為餅的每個部分的邊框設置陰影,以突出其立體效果
shadowOffset: 2, //設置陰影區域偏移出餅的每部分邊框的距離
shadowDepth: 5, // 設置陰影區域的深度
shadowAlpha: 0.07 // 設置陰影區域的透明度
}
},
legend:{
show: true,//設置是否出現分類名稱框(即所有分類的名稱出現在圖的某個位置)
location: 'ne', // 分類名稱框出現位置, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // 分類名稱框距圖表區域上邊框的距離(單位px)
yoffset: 12, // 分類名稱框距圖表區域左邊框的距離(單位px)
}
});
});
</script>
</head>
<body>
<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div>
</body>
</html>

生成圖表展示如下:

jqPlot——基于jquery的頁面圖表繪制工具 - gaoyusi - My co<wbr>de life

下面是一些其他類型的圖標的截圖:

1.多縱軸圖

jqPlot——基于jquery的頁面圖表繪制工具 - gaoyusi - My co<wbr>de life

2.帶提示信息的甘特圖

jqPlot——基于jquery的頁面圖表繪制工具 - gaoyusi - My co<wbr>de life

3.以table方式展示提示信息的甘特圖

jqPlot——基于jquery的頁面圖表繪制工具 - gaoyusi - My co<wbr>de life

4.帶提示信息的線狀圖(可拖動)

jqPlot——基于jquery的頁面圖表繪制工具 - gaoyusi - My co<wbr>de life

對于jqPlot功能的具體介紹請關注本文的后續文章——jqPlot的Option配置對象詳解。

您可能感興趣的文章:
jqPlot jquery的頁面圖表繪制工具
jQuery繪圖插件 jqPlot
jqPlot 基于jquery的畫圖插件
jQuery 繪圖插件 jCanvas
jqPlot Option配置對象詳解
jQuery 繪圖插件 jCanvas
Jquery圖形報表插件 jqplot簡介及參數詳解
JavaScript交互式圖表工具包 JointJS
Raphael一個用于在網頁中繪制矢量圖形的Javascript庫
js圖表組件highcharts簡介

[關閉]
000069股票行情