使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用
原文链接：http://www.gbtags.com/gb/share/5820.htm
PS:数据有变动.大家看个原理就okay了~
jQuery sparklines是一个jQuery的图表插件，可以帮助你快速构建行内的小图表，今天我们将使用Sparklines开发一个动态监视首页PV变化的应用。希望大家能喜欢，并且多多留言！请点击演示中的"Click ME!!!"，查看动态PV变化效果。
如果你不知道什么是jQuery sparklines，请查看如下资源：
HTML代码：
- <divid="container">
- <divid="logo"></div>
- <divclass="desc">
- gbin1.com PV: <spanid="pv"></span>
- </div>
- <div>
- <ahref="#"id="showline">Line</a>
- <ahref="#"id="showbar">Bar</a>
- </div>
- <divid="pvlinewrap">
- <spanid="pvline"></span>
- </div>
- <divid="pvbarwrap">
- <spanid="pvbar"></span>
- </div>
- <divid="trigger"><ahref="#"id="loadpage"><u>Click Me !!!</u> to simulate loading gbin1 home page</a></div>
- <divid="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}
原文链接：http://www.gbtags.com/gb/share/5820.htm
以上数据我们可以使用后台程序，例如，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:100pxauto;
- padding:10px;
- width:960px;
- font-family:Arial;
- background: url("../images/dark.png");
- }
- #container span{
- height:150px;
- }
- 原文链接：http://www.gbtags.com/gb/share/5820.htm
- #logo{
- width:180px;
- height:120px;
- background: url("../images/logo.png");
- }
- #pv{
- font:18px"times roman";
- font-weight: bold;
- }
- 原文链接：http://www.gbtags.com/gb/share/5820.htm
- .desc{
- background:#303030;
- line-height:30px;
- width:250px;
- text-align:center;
- color:#FFF;
- margin:20px0px20px0px;
- }
- #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:35px0px35px0px;
- }
相关推荐
ROES 2020-10-24
lvxingzhe 2020-06-18
明天就流量监控 2020-06-10
aolia000 2020-05-29
流量监控lookman 2020-04-19
QAnyang 2020-03-14
流量监控lookman 2020-02-19
流量监控lookman 2020-01-06
流量监控lookman 2020-01-06
流量监控距离咯 2019-12-14
Noontec 2019-11-13
wpeng 2019-11-12
aweilark 2019-11-11
安防监控ezhf 2019-11-05
IA视频监控 2019-08-22
bktest 2019-10-21
bighandsky 2017-05-02
OO哈哈 2018-12-06