上次那个“小试”实在太不过瘾，这次我们从服务器上定时取出数据，然后用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
>
然后就是重点了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;
}
其中一些算法我做的也不太好，有很多需要改进的地方。主要就是如何把从其服务器得到的元数据转换成画图用的数据（两个数组，存放二维坐标集）。
我画了两条线，一条线太单薄了，呵呵。两条线用的x轴坐标相同（其实是时间），所以就用一个数组了。
