使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用

杰特智能网络监控 2015-07-22

 原文链接:http://www.gbtags.com/gb/share/5820.htm

在线演示

PS:数据有变动.大家看个原理就okay了~

jQuery sparklines是一个jQuery的图表插件,可以帮助你快速构建行内的小图表,今天我们将使用Sparklines开发一个动态监视首页PV变化的应用。希望大家能喜欢,并且多多留言!请点击演示中的"Click ME!!!",查看动态PV变化效果。

如果你不知道什么是jQuery sparklines,请查看如下资源:

HTML代码:

  1. <divid="container">
  2. <divid="logo"></div>
  3. <divclass="desc">
  4. gbin1.com PV: <spanid="pv"></span>
  5. </div>
  6. <div>
  7. <ahref="#"id="showline">Line</a>
  8. <ahref="#"id="showbar">Bar</a>
  9. </div>
  10. <divid="pvlinewrap">
  11. <spanid="pvline"></span>
  12. </div>
  13. <divid="pvbarwrap">
  14. <spanid="pvbar"></span>
  15. </div>
  16. <divid="trigger"><ahref="#"id="loadpage"><u>Click Me !!!</u> to simulate loading gbin1 home page</a></div>
  17. <divid="pageloader">
  18. </div>
  19. </div>

Javascript代码:

一下代码用来动态生成线状图和柱状图,这里我们使用setTimeout来每隔一秒生成新的图形。 

  1. var mdraw =0;
  2. var mrefreshinterval =1000;
  3. var pvs_max =50;
  4. mdraw =function(){
  5. $.getJSON(
  6. "counter.jsp",
  7. function(json){
  8. pvs.push(json.pv);
  9. if(pvs.length > pvs_max)
  10. pvs.splice(1);
  11. $("#pv").html(json.pv);
  12.  
  13. }
  14. );
  15. $('#pvline').sparkline(pvs,{ width:'250px', height:'50px', lineColor :'#202020', fillcolor:'false'});
  16. $('#pvbar').sparkline(pvs,{type:'bar', barColor:'black', height:'50px'});
  17. mtimer = setTimeout(mdraw, mrefreshinterval);
  18. }
  19. var mtimer = setTimeout(mdraw, mrefreshinterval);

以上代码中我们使用远程JSON数据来生成对应图表。对应生成数据如下:

  1. {"pv":643}

 原文链接:http://www.gbtags.com/gb/share/5820.htm

以上数据我们可以使用后台程序,例如,PHP,JSP,.Net生成对应JSON数据。

  1. $("#showline").click(function(){
  2. $("#pvlinewrap").show();
  3. $("#pvbarwrap").hide();
  4. });
  5.  
  6. $("#showbar").click(function(){
  7. $("#pvlinewrap").hide();
  8. $("#pvbarwrap").show();
  9. });
  10.  
  11. $("#loadpage").click(function(e){
  12. $('#pageloader').load("/index.html #null");
  13. e.printdefault();
  14. });

以上代码我们用来分别隐藏柱状图或者线状图, 并且使用下方的一个链接模拟加载GBin1.com首页。用以改变PV数值。

CSS代码:

  1. #container{
  2. margin:100pxauto;
  3. padding:10px;
  4. width:960px;
  5. font-family:Arial;
  6. background: url("../images/dark.png");
  7. }
  8.  
  9. #container span{
  10. height:150px;
  11. }
  12. 原文链接:http://www.gbtags.com/gb/share/5820.htm 
  13. #logo{
  14. width:180px;
  15. height:120px;
  16. background: url("../images/logo.png");
  17. }
  18.  
  19. #pv{
  20. font:18px"times roman";
  21. font-weight: bold;
  22. }
  23.  原文链接:http://www.gbtags.com/gb/share/5820.htm
  24. .desc{
  25. background:#303030;
  26. line-height:30px;
  27. width:250px;
  28. text-align:center;
  29. color:#FFF;
  30. margin:20px0px20px0px;
  31. }
  32.  
  33. #trigger a{
  34. color:#202020;
  35. font-size:11px;
  36. background: url("../images/light.png");
  37. padding:10px;
  38. text-decoration : none;
  39. }
  40.  
  41.  
  42. #showline, #showbar{
  43. background: url("../images/light.png");
  44. padding:10px;
  45. font-size:10px;
  46. }
  47.  
  48. #pvlinewrap, #pvbarwrap{
  49. padding:35px0px35px0px;
  50. }
 

相关推荐

Web全栈笔记 / 0评论 2020-06-15