上次那個“小試”實在太不過癮，這次我們從服務器上定時取出數據，然后用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軸坐標相同（其實是時間），所以就用一個數組了。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
