在试XML-RPC（这回画个图吧）

上次那个“小试”实在太不过瘾，这次我们从服务器上定时取出数据，然后用javascript在浏览器上画个图。
这回我就不具体解释了，就贴一下程序啦！！

先来个图吧：


 用javascript画图，当然不能空手画了，找个库吧。wz_jsgraphics，详细资料看这里（http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm#download）很酷的一个javascript图形库，当然除了画图还有别的，不妨试试（我一年前发现的这东东，现实才第一次用）用起来跟用c画图差不多。
 首先当然还是建个服务的类：

public   class  DataService  {

    public double getData(){
        Random r = new Random();
        return 20+(10*r.nextDouble()-5);
    }
    
    public static void main(String[] args){
        DataService ds = new DataService();
        for(int i=0;i<20;i++){
            System.out.println(ds.getData());
        }
    }
}

Servlet上篇文章里有，我这里就不写了。
然后是一个html页面。

< html >
< head >
< title > XML-RPC </ title >
< script  type ="text/javascript"  src ="./js/init.js" ></ script >
< script  type ="text/javascript"  src ="./js/lib/urllib.js" ></ script >
< script  type ="text/javascript"  src ="./js/lib/xml.js" ></ script >
< script  type ="text/javascript"  src ="./js/lib/xmlrpc.js" ></ script >
< script  type ="text/javascript"  src ="./js/hello.js" ></ script >
< script  type ="text/javascript"  src ="./js/wz_jsgraphics.js" ></ script >
</ head >
< body  onload ="init()" >
< input  type ="button"  id ="do3"  value ="start"  onclick ="startTimer()" />
< input  type ="button"  id ="do3"  value ="stop"  onclick ="stopTimer()" />
< input  type ="text"  id ="result"   />
< div  id ="canvas"  style ="border:1px solid #6666FF; position:relative;height:300px;width:500; background-color:#CCCCCC" ></ div >
< textarea  id ="debug"  rows ="10"  name ="S1"  cols ="69" ></ textarea >
</ body >
</ html >

重点是这个div，我们用wz_jsgraphics画图就是往这上面画，他的作用相当于很多画图系统的canvas.其实主要是提供参考坐标。
然后就是重点了hello.js(懒得该名字了)

var  timerid;
var  dataservice;
var  g;
var  xPoints  =   new  Array();
var  y1Points  =   new  Array();
var  y2Points  =   new  Array();
var  length = 0 ;
startTimer  =   function (){
    init();
     if (timerid == null ){
        timerid  =  window.setInterval( " doTask() " , 800 ); 
    }
}

stopTimer  =   function (){
    window.clearInterval(timerid);
    timerid = null ;
}

function  init(){
     var  xmlrpc = null ;
     try {
        xmlrpc  =  importModule( " xmlrpc " );
    } catch (e){
        reportException(e);
         throw   " importing of xmlrpc module failed. " ;
    }
    
     var  addr  =   " http://localhost:8080/Rpc/RpcServer " ;
     var  methods  =  [ " DataService.getData " ];
    
     try {
        dataservice  =   new  xmlrpc.ServiceProxy(addr, methods);
    } catch (e){
         var  em;
         if (e.toTraceString){
            em  =  e.toTraceString();
        } else {
            em  =  e.message;
        }
        alert( " Error trace: \n\n "   +  em);
    }
    g  =   new  jsGraphics( " canvas " );
            
}


function  doTask(){
     var  rslt  =  dataservice.DataService.getData();
    document.getElementById( " result " ).value = rslt;
     var  y1  =   145 * rslt / 20 ;
     var  rslt  =  dataservice.DataService.getData();
     var  y2  =   145 * rslt / 20 ;
     if (length < 44 ){
        y1Points[length] = y1;
        y2Points[length] = y2;
         for ( var  i = 0 ;i < y1Points.length;i ++ ){
            xPoints[i]  =   30 + 10 * i;
        }
        length ++ ;
    }  else  {
         for ( var  i = 0 ;i < y1Points.length - 1 ;i ++ ){
            y1Points[i]  =  y1Points[i + 1 ];
            y2Points[i]  =  y2Points[i + 1 ];
        }
        y1Points[length] = y1;
        y2Points[length] = y2;
    }
    g.clear();
    drawbg();
    drawline();
    debug();
}

function  drawline(){
    g.setStroke( 2 );
     for ( var  i = 1 ;i <= y1Points.length;i ++ ){
        g.setColor( " yellow " );
        g.drawLine(xPoints[i - 1 ],y1Points[i - 1 ],xPoints[i],y1Points[i])
        g.setColor( " red " );
        g.drawLine(xPoints[i - 1 ],y2Points[i - 1 ],xPoints[i],y2Points[i])
    }
     // g.drawPolyline(xPoints,yPoints);
    g.paint();
}

function  drawbg(){
    g.setStroke( 2 );
    g.setColor( " maroon " );
    g.drawLine( 30 , 270 , 470 , 270 ); // x轴
    g.drawLine( 30 , 270 , 30 , 10 ); // y轴
    g.drawLine( 30 , 10 , 26 , 14 ); // x轴箭头
    g.drawLine( 30 , 10 , 34 , 14 );
    g.drawLine( 470 , 270 , 466 , 266 ); // y轴箭头
    g.drawLine( 470 , 270 , 466 , 274 );
    
    g.setColor( " #000000 " ); // 画刻度
     var  x  =   30 ;
     for ( var  y  =   270 ;y  >=   20 ;y  =  y  -   50  ){
        g.drawLine(x - 1 ,y,x + 1 ,y);
    }
    g.setStroke( 1 );
    g.drawLine( 30 , 145 , 470 , 145 ); // 中心线
    
    g.drawString( " 0 " , 23 , 271 );
    g.drawString( " Time " , 430 , 271 );
    g.paint();
}

function  debug(){
     var  debug  =   "" ;
     for ( var  i = 0 ;i < xPoints.length;i ++ ){
        debug  +=   " x: " + i + "   " + xPoints[i] + "  y1: " + i + "   " + y1Points[i] + "  y2: " + i + "   " + y2Points[i] + " \n " ;
    }
    document.getElementById( " debug " ).value = debug;

}

其实没什么复杂的，不过就是javascript调试起来太费事了。错又不知道错在哪里。还是喜欢java，调试起来容易多了！
其中一些算法我做的也不太好，有很多需要改进的地方。主要就是如何把从其服务器得到的元数据转换成画图用的数据（两个数组，存放二维坐标集）。
我画了两条线，一条线太单薄了，呵呵。两条线用的x轴坐标相同（其实是时间），所以就用一个数组了。