日期：2011/11/14? 來(lái)源：Terry

jQuery sparklines是一個(gè)jQuery的圖表插件，可以幫助你快速構(gòu)建行內(nèi)的小圖表，今天我們將使用Sparklines開發(fā)一個(gè)動(dòng)態(tài)監(jiān)視首頁(yè)P(yáng)V變化 的應(yīng)用。希望大家能喜歡，并且多多留言！請(qǐng)點(diǎn)擊演示中的"Click ME!!!"，查看動(dòng)態(tài)PV變化效果。

在線演示

如果你不知道什么是jQuery sparklines，請(qǐng)查看如下資源：

• jQuery sparklines官方網(wǎng)站
• 5個(gè)最頂級(jí)jQuery圖表類庫(kù)插件-Charting plugin

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代碼：

一下代碼用來(lái)動(dòng)態(tài)生成線狀圖和柱狀圖，這里我們使用setTimeout來(lái)每隔一秒生成新的圖形。?

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ù)來(lái)生成對(duì)應(yīng)圖表。對(duì)應(yīng)生成數(shù)據(jù)如下：

{"pv":643}

以上數(shù)據(jù)我們可以使用后臺(tái)程序，例如，PHP，JSP，.Net生成對(duì)應(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();
});

以上代碼我們用來(lái)分別隱藏柱狀圖或者線狀圖， 并且使用下方的一個(gè)鏈接模擬加載GBin1.com首頁(yè)。用以改變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;
}

總結(jié)

以上是生活随笔為你收集整理的使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。