使用jQuery圖表插件Sparklines來開發(fā)一個實(shí)用的網(wǎng)站PV(page view)實(shí)時監(jiān)控應(yīng)用
日期:2011/11/14 來源:Terry
jQuery sparklines是一個jQuery的圖表插件,可以幫助你快速構(gòu)建行內(nèi)的小圖表,今天我們將使用Sparklines開發(fā)一個動態(tài)監(jiān)視首頁P(yáng)V變化 的應(yīng)用。希望大家能喜歡,并且多多留言!請點(diǎn)擊演示中的"Click ME!!!",查看動態(tài)PV變化效果。

如果你不知道什么是jQuery sparklines,請查看如下資源:
HTML代碼:
<div id="container">
<div id="logo"></div>
<div class="desc">
gbin1.com PV: <span id="pv"></span>
</div>
<div>
<a href="#" id="showline">Line</a>
<a href="#" id="showbar">Bar</a>
</div>
<div id="pvlinewrap">
<span id="pvline"></span>
</div>
<div id="pvbarwrap">
<span id="pvbar"></span>
</div>
<div id="trigger"><a href="#" id="loadpage"><u>Click Me !!!</u> to simulate loading gbin1 home page</a></div>
<div id="pageloader">
</div>
</div>
Javascript代碼:
一下代碼用來動態(tài)生成線狀圖和柱狀圖,這里我們使用setTimeout來每隔一秒生成新的圖形。
var mdraw = 0;
var mrefreshinterval = 1000;
var pvs_max = 50;
mdraw = function() {
$.getJSON(
"counter.jsp",
function(json) {
pvs.push(json.pv);
if (pvs.length > pvs_max)
pvs.splice(1);
$("#pv").html(json.pv);
}
);
$('#pvline').sparkline(pvs, { width: '250px', height: '50px', lineColor : '#202020', fillcolor: 'false'});
$('#pvbar').sparkline(pvs, {type: 'bar', barColor: 'black', height: '50px'} );
mtimer = setTimeout(mdraw, mrefreshinterval);
}
var mtimer = setTimeout(mdraw, mrefreshinterval);
以上代碼中我們使用遠(yuǎn)程JSON數(shù)據(jù)來生成對應(yīng)圖表。對應(yīng)生成數(shù)據(jù)如下:
{"pv":643}
以上數(shù)據(jù)我們可以使用后臺程序,例如,PHP,JSP,.Net生成對應(yīng)JSON數(shù)據(jù)。
$("#showline").click(function(){
$("#pvlinewrap").show();
$("#pvbarwrap").hide();
});
$("#showbar").click(function(){
$("#pvlinewrap").hide();
$("#pvbarwrap").show();
});
$("#loadpage").click(function(e){
$('#pageloader').load("/index.html #null");
e.printdefault();
});
以上代碼我們用來分別隱藏柱狀圖或者線狀圖, 并且使用下方的一個鏈接模擬加載GBin1.com首頁。用以改變PV數(shù)值。
CSS代碼:
#container{
margin: 100px auto;
padding: 10px;
width: 960px;
font-family: Arial;
background: url("../images/dark.png");
}
#container span{
height: 150px;
}
#logo{
width: 180px;
height: 120px;
background: url("../images/logo.png") ;
}
#pv{
font: 18px "times roman";
font-weight: bold;
}
.desc{
background: #303030;
line-height: 30px;
width: 250px;
text-align:center;
color: #FFF;
margin: 20px 0px 20px 0px;
}
#trigger a{
color: #202020;
font-size: 11px;
background: url("../images/light.png");
padding: 10px;
text-decoration : none;
}
#showline, #showbar{
background: url("../images/light.png");
padding: 10px;
font-size: 10px;
}
#pvlinewrap, #pvbarwrap{
padding: 35px 0px 35px 0px;
}
歡迎訪問GBin1.com


浙公網(wǎng)安備 33010602011771號