用ajax与VML画实时曲线图 ( by quqi99 )


                        用ajax与VML画实时曲线图 ( by quqi99 )



作者:张华 发表于:2007-07-04 ( http://blog.csdn.net/quqi99 )

版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明。


用AJAX与VML画实时曲线图。X轴为时间轴,随时间变而变,Y轴为实时查找的一个目录下文件的数目,Y轴的坐标大小可随文件数目的增大而动态增加。采用AJAX异步取数据无刷新。相关文件如下:

dirWatch.jsp源码如下:

<%@ page contentType="text/html;charset=gb2312"%>

<html xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>无标题文档</title>

<!-- 每次添加, 样式 -->  
<link href="/cssweb/cmsimages/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
 background-color: #FFF7EE;
 scrollbar-face-color: #E4F1FF;
    scrollbar-highlight-color: #ffffff;
    scrollbar-shadow-color: #FAFCFF;
    scrollbar-arrow-color: #5CAAF2;
    scrollbar-base-color: #C1DAFB;
    scrollbar-dark-shadow-color: #A6BDEC;
}
-->
</style>


 <script language="JavaScript" src="<%=request.getContextPath() %>/js/ajax_func.js">
 </script>
<script language="JavaScript" type="text/javascript">
<!--
   function reload()
 {
  refreshData(); //调用Ajax方法异步更新数据
  }
 
  setInterval('reload()', 5*1000);
 
//-->


function VMLCurve(objDiv){
 
 this.shrinkFactorY = 1;      //Y轴的缩小因子
 this.benchmarkDate = null;   //基准时间
 this.objDiv = objDiv;    // obj
 this.toolTips    = "";    // 提示信息
 this.configXPerValue = 0;
    this.configYPerValue = 0;
    this.configXMinValue = 0;
    this.configYMinValue = 0;
 
 this.OriginXValue = "";    // 圆点坐标
 this.OriginYValue = "";
 
 //定义区域参数
 this.group    = null;  // v:group
 this.n      = 1   // 倍数
 this.gpWidth   = 700;  // Width
 this.gpHeight   = 350;  // Height
 
 this.configXTextLeft = -25;  // 定义 X轴坐标值左边离坐标距离,即坐标值左端相对于当前坐标点的偏移
 this.configXTextTop  = 10;  // 定义 X轴坐标值上方离X轴的距离
 
 this.configYLeft   = 60;  // 定义 Y轴距对象(group)左边的距离
 this.configYTextRight = 40;  // 定义 Y轴坐标值离Y轴右边的距离
 this.configYTextBottom  = 5;  // 定义 Y轴坐标值离坐标下边距离
 
 //X轴值
 this.configXValue = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月');
 //Y轴值
 this.configYValue = new Array('100','200','300','400','500','600','700','800','900','1000');
 
 // Init BackGround
 this.Background  = null; 
 this.bgColor  = "#C4E1FF";  // BackGround Color
 
 // Init ToolTip
 this.configToolLeft    = 15;
 this.configToolTop    = 15;
 this.ToolTip      = document.createElement("DIV");
 this.ToolTip.className    = "ToolTip";
 this.ToolTip.id     = "ToolTip";
 this.ToolTip.style.zIndex   = "100";
 this.ToolTip.style.position  = "absolute";
 this.ToolTip.style.display  = "none";
 this.ToolTip.innerHTML   = "";
 
 //设置点线的属性
 this.PointRadius = 2;      //圆点的半径大小
 this.LineSize    = 1;                   //线的大小
 this.PointColor  = "#FF6600";   //点的颜色
 this.LineColor   = "#FF6600";   //线的颜色
 
 this.Points = "";
 this.PreviousPointY = 0;
 this.PointsYCount   = 0;
 }

// Init
VMLCurve.prototype.init = function(strObj,strTitle){
 
 this.gpcX   = this.gpWidth/this.n;   // coordsize X
 this.gpcY   = this.gpHeight/this.n;   // coordsize Y
 
 this.configXLen    = this.gpWidth - this.configYLeft*2+20; // 定义 X轴长度(600)
 this.configYLen    = this.gpHeight- 100;   // 定义 Y 轴长度(250)
 this.configXNum  = this.configXValue.length;  // X轴刻度数
 this.configYNum  = this.configYValue.length;  // Y轴刻度数
 
    this.configXTop  = this.configYLen+20;   //定义 X轴距对象上边的距离
 
 this.configXPerLen = str2Float((this.configXLen-20)/this.configXNum,2); //定义 X轴每刻度长度
 this.configYPerLen = str2Float((this.configYLen-20)/this.configYNum,2); //定义 Y轴每刻度长度

 
 //初始化背景参数
 this.bgWidth  = this.gpWidth;  // Height
 this.bgHeight  = this.gpHeight; // Width
 
 if(this.configYPerValue!=0){
        var tempArr = new Array(this.configYNum);
        for(var i=0;i<this.configYNum;i++){
         tempArr[i] = str2Float(this.configYMinValue+this.configYPerValue*i,0);
        }
        this.configYValue = tempArr;
 }
    else {
        this.configYPerValue = str2Float((this.configYValue(this.configYNum)-this.configYMinValue)/this.configYNum,2);
    }
   /**
   if(this.configXPerValue!=0){
        var tempArr = new Array(this.configXNum);
        for(var i=0;i<this.configXNum;i++){
         tempArr[i] = str2Float(this.configXMinValue+this.configXPerValue*i,2);
        }
        this.configXValue = tempArr; 
 }else{
         //this.configXPerValue = str2Float((this.configXValue(this.configXNum)-this.configXMinValue)/this.configXNum,2);
    }
    **/
    //此时横坐标是时间,专门定制格式化显示时间
    if(this.configXPerValue!=0){
        var tempArr = new Array(this.configXNum);
        for(var i=0;i<this.configXNum;i++){
            //var time = str2Float(this.configXMinValue+this.configXPerValue*i,2);
            var time = new Date(this.configXMinValue+this.configXPerValue*i);
            tempArr[i] = formatDate(time);  //格式化时间
        }
        this.configXValue = tempArr; 
 }else{
         //this.configXPerValue = str2Float((this.configXValue(this.configXNum)-this.configXMinValue)/this.configXNum,2);
    }
   
 
    this.configYValue  = this.configYValue.reverse(); //倒序数组
 this.createGroup();
 this.createBackgroud();
 this.createCoordinate();  //建横纵两坐标(此时只有两根线)
 this.createXTableLine();  //建横坐标及平行于Y轴的网格线
 this.createYTableLine();  //建纵坐标及平行于X轴的网格线
 this.createToolTip();     //插入用于提示的DIV
 
 this.setTitle(strTitle);  //插入DIV设置标题
 this.strObj = strObj;
}

//建立画图区域
VMLCurve.prototype.createGroup = function() {
 this.group = document.createElement("<v:group ID=/"group1/" coordsize=/""+this.gpcX+","+this.gpcY+"/" style=/"z-index:-10;width:"+this.gpWidth+"px;height:"+this.gpHeight+"px/">");
 //始终保证Div中只有一个Group元素,若以前有,则先删除再插入
 var kids = this.objDiv.childNodes;
 /**
 if(kids.length == 0){
    this.objDiv.insertBefore(this.group);
 }
 if(kids.length > 0){
    for(var i=kids.length-1;i>=0;i--){
      this.objDiv.removeChild(kids[i]);
    }   
 }
 **/
 this.objDiv.innerHTML = "";
 this.objDiv.insertBefore(this.group);
}

//填充背景
VMLCurve.prototype.createBackgroud = function() {
 this.Background = document.createElement("<v:rect fillcolor=/"white/" strokecolor=/"black/" style=/"z-index:-8;width:"+this.bgWidth+"px;height:"+this.bgHeight+"px/" />");
 this.Background.insertBefore(document.createElement("<v:fill rotate=/"t/" type=/"gradient/" color2=/""+this.bgColor+"/" />"));
 this.Background.insertBefore(document.createElement("<v:shadow on=/"t/" type=/"single/" color=/"silver/" offset=/"3pt,3pt/" />"));
 this.group.insertBefore(this.Background);
}

//建立坐标轴
VMLCurve.prototype.createCoordinate = function() {
 var pointX1 = this.configYLeft + "," + this.configXTop;                      //X轴起点坐标
 var pointX2 = this.configYLeft+this.configXLen + "," + this.configXTop;      //X轴终点坐标
 var pointY1 = pointX1;                                                       //Y轴起点坐标
 var pointY2 = this.configYLeft + "," + eval(this.configXTop-this.configYLen);//Y轴终点坐标
 this.createCoordinateLine(pointX1,pointX2);
 this.createCoordinateLine(pointY1,pointY2);
 this.setOriginValue(this.OriginXValue,this.OriginYValue);
}

//建立坐标线
VMLCurve.prototype.createTableLine = function(xPoint,yPoint,sTableColor){
 var tempLine = document.createElement("<v:line from=/""+xPoint+"/" to=/""+yPoint+"/" strokeColor=/""+sTableColor+"/" style=/"Z-INDEX:8;POSITION:absolute;/>");
 this.group.insertBefore(tempLine);
 tempLine.insertBefore(document.createElement("<v:stroke dashstyle=/"Solid/" />"));
}

//画坐标轴线,也就是画带箭头的直线
VMLCurve.prototype.createCoordinateLine = function(xPoint,yPoint){
 var tempLine = document.createElement("<v:line from=/""+xPoint+"/" to=/""+yPoint+"/" strokeColor=/"#FF6600/" strokeweight=/"1px/" style=/"Z-INDEX:8;POSITION:absolute;/"/>");
 this.group.insertBefore(tempLine);
 tempLine.insertBefore(document.createElement("<v:stroke  EndArrow=/"classic/" />"));  //直线带上剪头
}

//创建文本提示信息,即坐标值
VMLCurve.prototype.createText = function(xLeft,xTop,sText,sClass) {
 var tempObj = document.createElement("<P class=/""+sClass+"/" style=/"Z-INDEX:8;LEFT:"+xLeft+"px;POSITION:absolute;TOP:"+xTop+"px;/"/>");
 tempObj.innerHTML = sText;
 this.group.insertBefore(tempObj);
}

// 创建X坐标值
VMLCurve.prototype.createXTableLine = function(){
 var x1,y1,x2,y2,point1,point2,sTableColor;
 sTableColor = "#CCCCCC";
 for(var i=0;i<this.configXValue.length;i++){
  x1 = eval(this.configYLeft + this.configXPerLen*(i+1)); 
  y1 = eval(this.configXTop-this.configYLen)+10;
  x2 = x1;
  y2 = eval(this.configXTop+5);
  point1 = x1 + "," + y1;    //起始点
  point2 = x2 + "," + y2;    //终点
  //垂直于横坐标画线,
     this.createTableLine(point1,point2,sTableColor);
     //画坐标值
     this.createText(x1+this.configXTextLeft,this.configXTop+this.configXTextTop,this.configXValue[i],"pBlack");
 }
}

//创建Y轴坐标值
VMLCurve.prototype.createYTableLine = function(){
 var x1,y1,x2,y2,point1,point2,sTableColor;
 for(var i=0;i<this.configYValue.length;i++){
  x1 = eval(this.configYLeft - 5);   //Y轴左边写坐标值的
  y1 = eval(this.configXTop - this.configYPerLen*(i+1));
  x2 = eval(this.configYLeft + this.configXLen - 10);
  y2 = y1;
  point1 = x1 + "," + y1;
  point2 = x2 + "," + y2;
     if(this.configYValue[this.configYValue.length-i-1]=="C2")
        sTableColor="#FF9900";
  else
     sTableColor = "#CCCCCC";
  //垂直于Y轴,平行于X轴,从下往上一根根画线
  this.createTableLine(point1,point2,sTableColor);
  //画纵坐标值
  this.createText(this.configYLeft-this.configYTextRight,y1-this.configYTextBottom,this.configYValue[this.configYValue.length-i-1],"pBlack");
 }
}


//设置标题
VMLCurve.prototype.setTitle = function(strTitle){
 var tempObj = document.createElement("<div class=/"Title/" style=/"POSITION:absolute;Z-INDEX:9;LEFT:"+40+"px;TOP:"+(this.configXTop+40)+"px;width:"+(this.configXLen)+"px;height:"+(this.gpHeight-this.configXTop-20)+";/>");
 tempObj.innerHTML = strTitle;
 this.group.insertBefore(tempObj);
}

// 画圆点坐标
VMLCurve.prototype.setOriginValue = function(x,y){
 this.createText(this.configYLeft+this.configXTextLeft,this.configXTop+this.configXTextTop,x,"pBlack");
 this.createText(this.configYLeft-this.configYTextRight,this.configXTop-this.configYTextBottom,y,"pBlack");
}


// 设置圆点坐标属性
VMLCurve.prototype.setPointsProp = function(sPointRadius,sLineSize,sPointColor,sLineColor){
 this.PointRadius = sPointRadius;   //圆点的半径大小
 this.LineSize    = sLineSize;           //线的大小
 this.PointColor  = sPointColor;   //点的颜色
 this.LineColor   = sLineColor;   //线的颜色
}


// 设置纵坐标的值
VMLCurve.prototype.setPointsValue = function(xValueArr,yValueArr){
    var sValue  = "";
    var xValue  = 0;
 var yValue  = 0;
 var tempLen = 0;
 var thisX   = 0;
 var thisY   = 0;
 var tempX   = 0;
    var tempY   = 0;
 for(var i=0;i<xValueArr.length;i++){
        thisX   = str2Float(xValueArr[i],2);
        thisY   = str2Float(yValueArr[i],2);
        //tempX   = str2Float((thisX - this.OriginXValue)/this.configXPerValue,2);
  tempY   = str2Float((thisY - this.OriginYValue)/this.configYPerValue,2);
  xValue  = str2Float(this.configYLeft + str2Float(thisX*this.configXPerLen,2),2);
  yValue  = str2Float(this.configXTop - str2Float(tempY*this.configYPerLen,2),2);
  //横坐标经历了变换: var xValue = (curtime - vc.benchmarkDate.getTime())/configXPerValue; ,再逆变换变回来
  var diplayXValue = formatDate(new Date(((thisY + this.configXPerValue)+vc.benchmarkDate.getTime())));
  sValue  = "坐标:[" + diplayXValue + ", " + thisY + "]";
  
        //this.PointsYCount  += str2Float(yValueArr[i],2);
  //this.PreviousPointY = yValueArr[i];
  //这句很关键,把所有要画的点全部连起来,在下面传到createCurveLine()函数中以备调用
  this.Points = this.Points + xValue + "," + yValue + " "; 
  this.createPoint(xValue,yValue,sValue);
 }
 //在两点之间画线
 this.createCurveLine();
 this.PreviousPointY = 0;
 this.Points         = 0;
 this.PointsYCount   = 0;
}


// create Point
VMLCurve.prototype.createPoint = function(sLeft,sTop,sText){
 //根据圆点的坐标,得到左上方点的坐标
 var xLeft  = sLeft - this.PointRadius;
 var xTop   = sTop  - this.PointRadius;
 var tempOval = document.createElement("<v:oval style=/"POSITION:absolute;Z-INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:"+2*this.PointRadius+";height:"+2*this.PointRadius+";cursor:hand;/" stroked=/"f/" fillcolor=/""+this.PointColor+"/" strokeweight=/"1px/" οnmοusemοve=/""+this.strObj+".setToolTip('block','" + sText + "'," + sLeft + "," + sTop + ");/" οnmοuseοut=/""+this.strObj+".setToolTip('none','');/"/>");
 group1.insertBefore(tempOval);
 /*
 var kids = group1.childNodes;
 if(kids.length > 0){
    for(var i=kids.length-1;i>=0;i--){
      if(kids[i].tagName == "oval"){
        group1.removeChild(kids[i]);
        //alert(kids[i].tagName);
       }
    }     
 }
 */
 group1.insertBefore(this.group);
}

//以两点为坐标画线
VMLCurve.prototype.createCurveLine = function(){
 var tempLine = document.createElement("<v:PolyLine Points=/""+ this.Points +"/" style=/"Z-INDEX:11;POSITION:absolute;/" strokeweight=/"2px/" filled=/"f/" />");
 var newStroke = document.createElement("<v:stroke dashstyle='solid' color='"+this.LineColor+"'/>");
 group1.insertBefore(tempLine);
 tempLine.insertBefore(newStroke);
}


VMLCurve.prototype.createToolTip = function(){
 this.group.insertBefore(this.ToolTip);
}

VMLCurve.prototype.setToolTip = function(sVisitable,sContent,x,y){
 this.ToolTip.style.pixelLeft  = x + this.configToolLeft;
 this.ToolTip.style.pixelTop  = y + this.configToolTop;
 this.ToolTip.style.display  = sVisitable;
 if(this.ToolTip.innerHTML==""){
  this.ToolTip.innerHTML = sContent;
 }
 if(sContent==""){
  this.ToolTip.innerHTML = "";
 }
}


/*********************************
* 字符串转换为数字(""-->0)as_type--str,num
* 参数说明:
as_str--转换的字符串
ai_digit--转换的小数位数(null--不限制小数位数,0--转换为整型,>0按小数位数转换)
as_type--转换后返回的类型(null,"num"--转换为数字类型,"str"--转换为字符串
(按小数格式化后的字符串)
* 例如:
* str2float("10.2124568795")返回float类型10.2124568795
* str2float("10.6",0)返回Int类型11(使用四舍五入的方法)
* str2float("10.2",2)返回float类型10.1
* str2float("10.2",2,"str")返回String类型"10.20"(按小数位数格式化字符串)
* str2float("10.216",2)返回float类型10.22
* str2float("10.216",2,"str")返回String类型"10.22"
*********************************
*/
function str2Float(as_str,ai_digit,as_type)
{
   var fdb_tmp = 0;
   var fi_digit = 0;
   var fs_digit = "1";
   var fs_str = "" + as_str;
   var fs_tmp1 = "";
   var fs_tmp2 = "";
   var fi_pos = 0;
   var fi_len = 0;
   fdb_tmp = parseFloat(isNaN(parseFloat(fs_str))?0:fs_str);
  
   switch (true)
   {
   case (ai_digit==null):       //不改变值,只转换为数字
   fdb_tmp = fdb_tmp;
   break;
   case (ai_digit==0):          //取得整数
   fdb_tmp = Math.round(fdb_tmp);
   break;
   case (ai_digit>0):            //按照传入的小数点位数四舍五入取值
   for (var i=0;i<ai_digit;i++) fs_digit +="0";
   fi_digit = parseInt(fs_digit);
   fdb_tmp = Math.round(fdb_tmp * fi_digit) / fi_digit;
   if (as_type=="str")
   {
   fs_tmp1 = fdb_tmp.toString();
   fs_tmp1 +=((fs_tmp1.indexOf(".")!=-1)?"":".") + fs_digit.substr(1);
   fi_pos = fs_tmp1.indexOf(".") + 1 + ai_digit;
   fdb_tmp = fs_tmp1.substr(0,fi_pos);
   }
  break;
   }
   return fdb_tmp;
}


  
</script>
</head>

<style type="text/css">
<!--
v/:* { behavior: url(#default#VML);} o/:* { behavior: url(#default#VML);}
body {
 margin:0px;
 padding:0px;
 font-size:12px;
 text-align:left
}

.pBlack {
 font-weight:bold;
 font-size:12px;
}

.pRed {
 font-weight:bold;
 font-size:12px;
 color:#FF0000;
}

/*横坐标轴样式*/
.pMonth {
 font-size:66px;
 font-family:"黑体";
 color:#CCCCCC;
 letter-spacing: 3px;
}

/*提示信息样式*/
.ToolTip {
 padding:4px;
 margin:4px;
 background-color: #CCCCCC;
 border: 1px solid #0066FF;
 text-align:left;
}

/*标题显示样式*/
.Title {
 font-family:"宋体", "华文仿宋";
 font-size:16px;
 text-align:center;
 font-weight:bold;
 color:#996600;
 vertical-align:middle;
}

.curveBody{
 margin:0;
 padding:0;
 height:20px;
 font-size:12px;
}

.curveForm{
 margin:0;
 padding:0;
 height:20px;
 font-size:12px;
}
-->
</style>

<body οnlοad='refreshData();'>
       
       
  <!-- 每次添加, 导航条 -->
   <%--
  <table width="100%" height="30"  border="0" cellpadding="0" cellspacing="0">
   <tr>
    <td width="30" align="center" background="images/lanmu-bg1.gif"><img src="/cssweb/images/icon01.gif" width="13" height="14"></td>
    <td background="/cssweb/images/lanmu-bg1.gif" class="font02">系统管理 &gt; 目录监测</td>
   </tr>
  </table>
  --%>


 <!-- 每次添加, 外层table -->
  <table width="100%"  border="0" cellspacing="5" cellpadding="5">
  <tr>
    <td align="center"> 
      <table width="100%"  border="0" cellspacing="1" cellpadding="0">
        <tr>
          <td width="17%" height="26" align="center" class="font-option">目录文件数目</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td width="20%" height="20" align="right" class="font-option"><strong>下载目录:</strong></td>
          <td>&nbsp;<label id="catsrcPath">&nbsp;</label> &nbsp;
            <label id="catsrcFileNum">&nbsp;</label></td>
        </tr>
        <tr>
          <td width="20%" height="20" align="right" class="font-option"><strong>索引目录:</strong></td>
          <td>&nbsp;      
            <label id="ftidbsrcPath">&nbsp;</label> &nbsp;
            <label id="ftidbsrcFileNum">&nbsp;</label>
          </td>
        </tr>
      </table>
     </td>
    </tr>
   
    <tr>
    <td>
        <table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
           
                   <div align="center" id="curve"></div>
               
            </td>
          </tr>
        </table>
   </td>
  </tr>
</table>
  
   
   
<script language="JavaScript">

   function LTrim(str)
   {
    var whitespace = new String(" /t/n/r");
    var s = new String(str);
    if (whitespace.indexOf(s.charAt(0)) != -1)
    {
        var j=0, i = s.length;
        while (j < i && whitespace.indexOf(s.charAt(j)) != -1)
        {
            j++;
        }
        s = s.substring(j, i);
    }
    return s;
   }
   function RTrim(str)
   {
    var whitespace = new String(" /t/n/r");
    var s = new String(str);
    if (whitespace.indexOf(s.charAt(s.length-1)) != -1)
    {
        var i = s.length - 1;
        while (i >= 0 && whitespace.indexOf(s.charAt(i)) != -1)
        {
            i--;
        }
        s = s.substring(0, i+1);
    }
    return s;
   }
   function Trim(str)
  {
    return RTrim(LTrim(str));
  }
 
 
  function refreshData() {
       document.all.curve.innerHTML = "<fond color='red'> 正在查询目录的文件数目,请稍后... </fond>";
    send_request("GET","<%=request.getContextPath()%>/DirWatchServlet",null,"TEXT",populateClass);
   }
 
  function populateClass() {            
 if (http_request.readyState == 4) { // 判断对象状态
  if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
   var list = http_request.responseText;
   var dataList = list.split("|");               //最后面的一项应该是空格   
              //在此构建调用curve()函数所需要的参数
              var configXPerValue = 2.2 *1000;         //横坐标的两点间隔为2秒
              var maxFilenum = 0;                    //最大的文件数
              var arrayLength = str2Float(dataList.length/2,0)-1;
              if(arrayLength < 10)
              {
                return;
              }
              var catsrcHengArr = new Array(arrayLength);   //分类曲线的横坐标
        var catsrcZongArr = new Array(arrayLength);
        var ftidbsrcHengArr = new Array(arrayLength); //索引曲线的横坐标
        var ftidbsrcZongArr = new Array(arrayLength);
       
              var pos1 = 0;
              var pos2 = 0;
              for(var i=0;i < dataList.length - 1;i++) {
           var datas = Trim(dataList[i]).split(","); //这个Trim就是来去上面的空格
           var name = datas[0];     //目录标志
           var path = datas[1];     //目录路径
           var filenum = datas[2];  //目录下的文件数,做纵坐标
           var curtime = datas[3];  //当前时间,实际横坐标
     
           //filenum = Math.floor(Math.random() * (99999 + 1)) ;  //测试语句
          
            document.getElementById(name + "FileNum").innerHTML = filenum ;
           
           //基准时间,做为横坐标的起始点,统一以服务器的时间为准
                 // vc.benchmarkDate = new Date();   
                 if(i==0){
                    // if(vc.benchmarkDate == null)
                       vc.benchmarkDate = new Date(curtime - 0); 
                   //  else{
                   //    if((curtime - vc.benchmarkDate.getTime()) > 0.5 * vc.configXPerValue)
                   //      vc.benchmarkDate = new Date(curtime - 0 );
                   //    }       
                  }else{
                    if((curtime - vc.benchmarkDate.getTime()) > 30*1000)
                        vc.benchmarkDate = new Date(curtime - 0 );
                  }
                   
           var xValue = (curtime - vc.benchmarkDate.getTime())/configXPerValue;  //标称横坐标
           //var yValue = (filenum%1000)*10;
           var yValue = filenum;
          
           if(filenum > maxFilenum){
               maxFilenum = filenum;
              }
                   
                    if("catsrc" == name){
                         catsrcHengArr[pos1] = xValue;
                         catsrcZongArr[pos1] = yValue;
                         pos1++;
                     }
                     if("ftidbsrc" == name){
                         ftidbsrcHengArr[pos2] = xValue;
                         ftidbsrcZongArr[pos2] = yValue;
                         pos2++;
                       } 
                    }
      
  
         //用VML画曲线图
         curve(maxFilenum,configXPerValue,vc.benchmarkDate,catsrcHengArr,catsrcZongArr,ftidbsrcHengArr,ftidbsrcZongArr);
   
  } else { //页面不正常
   alert("您所请求的页面有异常。");
  }
 }
}


   //建立曲线对象,全局对象,不要放在curve()函数中,因为在VMLCurve的createPoint()函数中还要调用这个对象的其他方法
   var vc = new VMLCurve(document.all.curve);
   function curve(maxFilenum,configXPerValue,benchmarkDate,catsrcHengArr,catsrcZongArr,ftidbsrcHengArr,ftidbsrcZongArr){     
     //设置X坐标值,从左至右
     // vc.configXValue = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
     vc.configXPerValue = configXPerValue;        //30秒钟
        vc.configXMinValue = benchmarkDate.getTime();  //对横坐标时间的格式化显示在VMLCurve对象中处理
       
     //设置Y坐标轴
     if(maxFilenum > 1000*10){
       var shrinkFactorY =  maxFilenum/1000;   //Y轴的缩小因子   
       vc.configYPerValue = 1000 * shrinkFactorY / 5;  //大于10000的倍数后,每次Y增长2倍(10/5=2)
          vc.configYMinValue = 1000 * shrinkFactorY / 5;
     }else{
       vc.configYPerValue = 1000;
          vc.configYMinValue = 1000;
         }
         vc.init("vc","下载目录:暗红色   索引目录:蓝色");
     //vc.configYValue = new Array(100,200,300,400,500,600,700,800,900,1000);
    
      
       //用数组设置点的横纵标值及提示信息
      // var catsrcHengArr = new Array(0.5,2,3,4,5,6,7,8,9,10);   //X轴数据,
      // var catsrcZongArr = new Array(10000,280,420,550,600,700,800,720,190,940); //Y轴数据
        //设置圆点的属性
        vc.setPointsProp(3,1,'#FF6600','#FF6600');  //设置圆点(参数:圆的半径,线的大小,点的颜色,线的颜色)
        vc.setPointsValue(catsrcHengArr,catsrcZongArr);
       
      
       //用数组设置点的横纵标值及提示信息
       //var ftidbsrcHengArr = new Array(0,9,3,4,5,6,7,8,9,10);   //X轴数据,
       // var ftidbsrcZongArr = new Array(320,280,700,550,900,700,800,300,190,940); //Y轴数据
        //设置圆点的属性
       vc.setPointsProp(3,1,'#FF6600','#00FFF');  //设置圆点(参数:圆的半径,线的大小,点的颜色,线的颜色)
       vc.setPointsValue(ftidbsrcHengArr,ftidbsrcZongArr);
       
 }
 
 
   function formatDate(date){
       var hour = date.getHours()+1;
       var minute = date.getMinutes();
       var second = date.getSeconds();
       return hour+":"+minute+":"+second;
    }
</script>


 
 </body>
</html>




DirWatchServlet.java源码如下:

记得在web.xml中添加相关配置:

<servlet>
  <servlet-name>DirWatchServlet</servlet-name>
  <servlet-class>jcss.search.dirWatch.servlet.DirWatchServlet</servlet-class> 
 </servlet>

<servlet-mapping>
         <servlet-name>DirWatchServlet</servlet-name>
         <url-pattern>/DirWatchServlet</url-pattern>
    </servlet-mapping>



package jcss.search.dirWatch.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import jcss.search.dirWatch.GetFileNumThread;
import jcss.search.dirWatch.model.MyFile;


/*
 * @作者:张华 @日期:2001-4-17 @说明:用于生成图表
 */
public class DirWatchServlet extends HttpServlet {

 private static final long serialVersionUID = 0;

 public static long getSerialVersionUID() {
  return serialVersionUID;
 }

 GetFileNumThread getFileNumThread = null;
 /*
  * 用于实例化org.jfree.data.time.Millisecond
  */
 public void init(ServletConfig config) throws ServletException {

  super.init(config);
  
  //启动线程,让它不停的收集数据,并放在一个堆栈中
  getFileNumThread = new GetFileNumThread(10);
  getFileNumThread.start();

 }

 /*
  * 关闭线程
  */
 public void destroy() {
  super.destroy();

 }

 /*
  * 当从页面地址栏访问时,直接调用doPost()方法 这样测试时可以不用写JSP页面
  */
 protected void doGet(HttpServletRequest arg0, HttpServletResponse arg1)
   throws ServletException, IOException {
  doPost(arg0, arg1);
 }

 /*
  */

 protected void doPost(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  response.setHeader("Content-Type", "text/html;charset=GB2312"); // 解决返回AJAX时是乱码的问题
  List<MyFile> fileNumList = new ArrayList<MyFile>();

  //启动单独线程做上面注释代码内做的事
  List catSrcFile = getFileNumThread.getCatsrcStack().getObjList();
  List ftidbsrcFile = getFileNumThread.getFtidbsrcStack().getObjList();
  
  fileNumList.addAll(catSrcFile);
  fileNumList.addAll(ftidbsrcFile);

  if (fileNumList != null) {
   Iterator itr = fileNumList.iterator();
   while (itr.hasNext()) {
    MyFile f = (MyFile) itr.next();
    long temp = f.getFilenum();
    String tempStr = new Long(temp).toString();
    String curTime = f.getCurTime().toString();
    
    response.getWriter().println(
      f.getName() + "," + f.getPath() + "," + tempStr + "," + curTime + "|"); // 部门之间用|隔开,部门的两个属性之间用,隔开
   }
  }
  // request.setAttribute("fileNumList", fileNumList);
  // request.getSession().setAttribute("fileNumList", fileNumList);

 }


}




线程GetFileNumThread.java源码如下:

/*
 * Created on 2007-7-3
 *
 * TODO To change the template for this generated file go to
 * Window - Preferences - Java - Code Style - Code Templates
 */
package jcss.search.dirWatch;

import java.io.File;
import java.util.Date;

import jcss.search.base.SearchEngineUtil;
import jcss.search.dirWatch.model.MyFile;
import jcss.search.dirWatch.util.FileUtil;
import jcss.search.dirWatch.util.Stack;


/**
 * @author 张华
 *
 * TODO To change the template for this generated type comment go to
 * Window - Preferences - Java - Code Style - Code Templates
 */
public class GetFileNumThread extends Thread {
 
 Stack catsrcStack;
 Stack ftidbsrcStack;
 
 long catsrcNum = 0;
 long ftidbsrcNum = 0;
 
 public GetFileNumThread(int stackSize){
  catsrcStack = new Stack(stackSize);
  ftidbsrcStack = new Stack(stackSize);
 }
 public GetFileNumThread(){ 
  catsrcStack = new Stack(200);
  ftidbsrcStack = new Stack(200);
 }
 
 String catsrc = SearchEngineUtil.getCatSrcRoot(); // 得到下载路径
 String ftidbsrc = SearchEngineUtil.getIndexSrcRoot();// 得到索引路径
 
 @Override
 public void run() {
  while(true){
   try {
   FileUtil.reset(); // 先清零
   catsrcNum = FileUtil.listDir(new File(catsrc));
   FileUtil.reset(); // 先清零
   //ftidbsrcNum = FileUtil.listDir(new File(ftidbsrc));
   //用于测试
   ftidbsrcNum = FileUtil.listDir(new File(ftidbsrc));
 
   //String curTime = SystemUtil.GetCurTime();
   Long curTime = new Date().getTime();
   MyFile catSrcFile = new MyFile("catsrc", catsrc, catsrcNum,curTime);
   MyFile ftidbsrcFile = new MyFile("ftidbsrc", ftidbsrc, ftidbsrcNum,curTime);
   catsrcStack.push(catSrcFile);
   ftidbsrcStack.push(ftidbsrcFile);
   
   if(catsrcStack.getIndex() < catsrcStack.getSize())
     sleep(1*1000);
   else
        sleep(30*1000);
   
   } catch (InterruptedException e) {
    e.printStackTrace();
   }
  }
 }

 public Stack getCatsrcStack() {
  return catsrcStack;
 }

 public Stack getFtidbsrcStack() {
  return ftidbsrcStack;
 } 
     
}


FileUtil.java源码如下:

package jcss.search.dirWatch.util;

import java.io.File;

/*
 * @作者:张华 @日期:2007-3-13 @说明:
 */
public class FileUtil {
 
 private static long filenum = 0;
 
 
 /**
  * 清零,每次调用listDir()时先调用此方法
  *
  */
 public static void reset(){
  FileUtil.filenum = 0 ;
 }

 /**
  * 遍历文件目录中文件的数目
  *
  * @param parentDir
  * @return
  * @throws Exception
  */
 public static long listDir(File parentDir) { 
  if (parentDir.isDirectory()) {

   //遍历
   File[] subFiles = parentDir.listFiles();
   for (int i = 0; i < subFiles.length; i++) {
    File f = subFiles[i];
    if (f.isFile()) {
     
     filenum ++ ;  //是文件就加1

    } else {
     listDir(f); //是目录就递归
    }
   }
  }
  return filenum;
 }

 /**
  * 用于测试
  *
  * @param path
  * @return
  */
 public static long listDir3(File parentDir) {

  long result = 0;

  // 根据实际需要在此处加入需要执行的代码,应该用一个目录下的文件数目,我们暂时利用了内存
  long freeMemory = new Double(6 * Math.random()).longValue();

  freeMemory = Runtime.getRuntime().freeMemory();
  long totalMemory = Runtime.getRuntime().freeMemory();

  // if ("catsrc".equals(path))
  result = freeMemory;
  // else if ("ftidbsrc".equals(path))
  // result = totalMemory;

  return result;
 }
 
 /**
  * 用于测试
  * @param parentDir
  * @return
  */
 public static long listDir2(File parentDir) {

  long result = 0;

  // 根据实际需要在此处加入需要执行的代码,应该用一个目录下的文件数目,我们暂时利用了内存
  long freeMemory = new Double(6 * Math.random()).longValue();

  freeMemory = Runtime.getRuntime().freeMemory();
  long totalMemory = Runtime.getRuntime().freeMemory();

  // if ("catsrc".equals(path))
  result = totalMemory;
  // else if ("ftidbsrc".equals(path))
  // result = totalMemory;

  return result;
 }
 
}



ajax_func.js如下:

//????XMLHttpRequest????????
var http_request = false;
//????????????http????????????
function send_request(method,url,content,responseType,callback) {//????????????????????????????????????
 http_request = false;
 //??????????XMLHttpRequest????
 if(window.XMLHttpRequest) { //Mozilla ??????
  http_request = new XMLHttpRequest();
  if (http_request.overrideMimeType) {//????MiME????
   http_request.overrideMimeType("text/xml");
  }
 }
 else if (window.ActiveXObject) { // IE??????
  try {
   http_request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e) {}
  }
 }
 if (!http_request) { // ??????????????????????
  window.alert("????????XMLHttpRequest????????.");
  return false;
 }
 if(responseType.toLowerCase()=="text") {
  //http_request.onreadystatechange = processTextResponse;
  http_request.onreadystatechange = callback;
 }
 else if(responseType.toLowerCase()=="xml") {
  //http_request.onreadystatechange = processXMLResponse;
  http_request.onreadystatechange = callback;
 }
 else {
  window.alert("??????????????????");
  return false;
 }
 // ????????????????????URL????????????????????????
 if(method.toLowerCase()=="get") {
  http_request.open(method, url, true);
 }
 else if(method.toLowerCase()=="post") {
  http_request.open(method, url, true);
  http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 }
 else {
  window.alert("http??????????????????");
  return false;
 }
 http_request.send(content);
}
// ??????????????????????????
function processTextResponse() {
 if (http_request.readyState == 4) { // ????????????
  if (http_request.status == 200) { // ??????????????????????????????
   //alert(http_request.responseText);
   alert("Text??????????");
  } else { //??????????
   alert("??????????????????????");
  }
 }
}
//??????????XML??????????????
function processXMLResponse() {
 if (http_request.readyState == 4) { // ????????????
  if (http_request.status == 200) { // ??????????????????????????????
   //alert(http_request.responseXML);
   alert("XML??????????");
  } else { //??????????
   alert("??????????????????????");
  }
 }
}





评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

quqi99

你的鼓励就是我创造的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值