在web页上画出动态变化的曲线

因为需要了解站点的运行状况,所以这里通过js来绘制出最近一段时间站点的访问量。通过AJAX无刷新动态(3秒)更新页面参数曲线,关于异步查询这里不再进行说明。

点的实现

要显示动态变化的点的曲线,这里用div的高度来显示数值(嵌套一个小的div,有高度,居顶,加色显示,形成点)。在实现过程中,通过js进行动态更新,用div的顶边距来形成点。将最近的10个数据存储在一维数组中,每次更新数据,将数组中的数据也进行前移,并实时更新div的高度,实现曲线的效果。当然如果想实现更“完美”的效果,可以使用第三方的图表显示相关库。

下面是用div模拟点的实现:

<!-- 以div模拟图表 -->
<div style="padding:10px; border-bottom:1px solid black; border-left:1px solid black; height:400px;">
   <div>本站当前请求用户数:<span id="requestCount"><%=application.getAttribute("onlineview") %></span><br></div>
   <div class="innerBlock" id="block0"></div>
   <div class="innerBlock" id="block1"></div>
   <div class="innerBlock" id="block2"></div>
   <div class="innerBlock" id="block3"></div>
   ......
   <div style="clear:both;"></div>
</div>
<style type="text/css">
.innerBlock{
   float:left;
   width:10px;
   padding:0px;
   border-bottom:10px solid red;
   margin:25px;
}

实时推送

因为项目对实时性的要求并不是很高,所以所以简单的轮询便可以实现所需的目的,通过JS中设定每隔多少秒通过Ajax刷新一次。 下面是数据动态更新的实现(因为项目中需要的数据已经通过ajax异步更新到页面的某位置,使用这里不需要向服务器请求,直接获取相应的值即可):
var a=new Array(10);
for(i=0;i<10;i++){
   a[i]=document.getElementById("requestCount").innerText; }
function refreshPic(){
   for(var i=0;i<10;i++){
      document.getElementById("block"+i).style.height=(300-((a[i]-a[0])/(a[9]-a[0]+1))*300)+"px";
      //document.getElementById("block"+i).innerText=(300-((a[i]-a[0])/(a[9]-a[0]+1)))+"px";
      a[i-1]=a[i];
   }
   a[9]=document.getElementById("requestCount").innerText;
}
//每3秒更新一次图表
self.setInterval("refreshPic();",3000);
新加评论 评论标题:

点的实现
实时推送