上次那个“小试”实在太不过瘾，这次我们从服务器上定时取出数据，然后用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轴坐标相同（其实是时间），所以就用一个数组了。