日期：2011/11/14? 來源：Terry

jQuery sparklines是一個jQuery的圖表插件，可以幫助你快速構建行內的小圖表，今天我們將使用Sparklines開發一個動態監視首頁PV變化 的應用。希望大家能喜歡，并且多多留言！請點擊演示中的"Click ME!!!"，查看動態PV變化效果。

在線演示

如果你不知道什么是jQuery sparklines，請查看如下資源：

• jQuery sparklines官方網站
• 5個最頂級jQuery圖表類庫插件-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代碼：

一下代碼用來動態生成線狀圖和柱狀圖，這里我們使用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);

以上代碼中我們使用遠程JSON數據來生成對應圖表。對應生成數據如下：

{"pv":643}

以上數據我們可以使用后臺程序，例如，PHP，JSP，.Net生成對應JSON數據。

$("#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數值。

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;
}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。