在JSP页面上画一张分析图，谢谢！

<html>
<head>
<title>JavaScript繪圖[email protected]</title>
<script language="JavaScript">
IE4 = ! (navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape") var xo=0
var yo=0
var Ox = -1
var Oy = -1 var rad = Math.PI/180
var maxY = 400
var color = "red" function print(str) {
document.write(str)
} function orgY(y) {
return maxY-y
}
function outPlot(x,y,w,h) {
print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
} function Plot(x,y) {
outPlot(x,y,1,1)
if(Ox>=0 || Oy>=0) {
ShowLine(Ox,Oy,x-Ox,y-Oy)
}
Ox = x
Oy = y
} function ShowLine(x,y,w,h) {
if(w<0) {
x += w
w = Math.abs(w)
}
if(h<0) {
y += h
h = Math.abs(h)
}
if(w<1) w=1
if(h<1) h=1
outPlot(x,y,Math.round(w),Math.round(h))
} function LineTo(x,y) {
Line(xo,yo,x,y)
} function sign(n) {
if(n>0)
return 1
if(n<0)
return -1
return n
} function Line(x1,y1,x2,y2) {
x2 = Math.round(x2)
y2 = Math.round(y2)
xo = x2
yo = y2
y1 = orgY(y1)
y2 = orgY(y2)
var str = ""
var i=0 var x = x1
var y = y1
dx = Math.abs(x2-x1)
dy = Math.abs(y2-y1)
s1 = sign(x2-x1)
s2 = sign(y2-y1) if(dx==0 || dy==0) {
ShowLine(x1,y1,x2-x1,y2-y1)
return
} if(dx>dy) {
temp = dx
dx = dy
dy = temp
key = 1
}else
key = 0
e = 2*dy-dx for(i=0;i<dx;i++) {
px = 0
py = 0
Plot(x,y)
while(e>=0) {
if(key==1) {
x += s1
px += s1
}else {
y += s2
py += s2
}
e = e-2*dx
}
if(key==1)
y += s2
else
x += s1
e = e+2*dy
}
} function MoveTo(x,y) {
Ox = Oy = -1
xo = Math.round(x)
yo = Math.round(y)
} // 圓
function Cir(x,y,r) {
MoveTo(x+r,y)
for(i=0;i<=360;i+=5) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
}
// 弧形
function Arc(x,y,r,a1,a2) {
MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y)
for(i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
}
// 扇形
function Pei(x,y,r,a1,a2) {
MoveTo(x,y)
for(var i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
}
// 彈出扇形
function PopPei(x,y,r,a1,a2) {
dx = r*Math.cos((a1+(a2-a1)/2)*rad)/10
dy = r*Math.sin((a1+(a2-a1)/2)*rad)/10
x += dx
y += dy
MoveTo(x,y)
for(var i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
} // 矩形
function Rect(x,y,w,h) {
MoveTo(x,y)
LineTo(x+w,y)
LineTo(x+w,y+h)
LineTo(x,y+h)
LineTo(x,y)
} // 准星
function zhunxing(x,y) {
var ox = xo
var oy = yo
var oColor = color
color = "#000000"
Line(x-5,y,x+6,y)
Line(x,y-6,x,y+5)
print('<span style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')
color = oColor
xo = ox
yo = oy
}
// 標注
function biaozhuStr(x,y,s) {
return '<span style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'
}
function biaozhu(x,y,s,t) {
var ox = xo
var oy = yo
var oColor = color
point = "p01.gif"
if(t==1) {
print(biaozhuStr(x-5,y+6,"?"+s))
}
if(t==2) {
print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s))
}
color = oColor
xo = ox
yo = oy
}
</script>
</head> <body>
<table border="0" width="100%">
<tr>
<td width="100%" style="font-family: 方正舒体; font-size: 18pt; color: #FF0000" class="t1">JavaScript繪圖</td>
</tr>
<tr>
<td width="100%" style="font-family: 幼圓; font-size: 12pt; color: #008000" class="t2">
如果需要在网頁上提供圖形化的資料，通常是將其制作成圖片，但這樣一來网絡上的開銷就太大了。有什么辦法呢？這里向你提供一組JavaScript函數，來解決這一問題。雖然簡單了點，但是對畫點線圖來說還是綽綽有余的！</td>
</tr>
</table> <script>
if(IE4) { // 基本圖形
color = "maroon"
Cir(50,40,20)
Arc(100,40,20,60,120)
Pei(150,60,40,240,300)
Rect(200,20,40,40) // 折線圖
color = "#FF0000"
var jd = new Array(
203,232,277,223,271,234,273,284,276,250,267,280
)
MoveTo(30,jd[0]-40)
biaozhu(xo,yo,jd[0])
for(i=1;i<jd.length;i++) {
LineTo(i*30+30,jd[i]-40)
biaozhu(xo,yo,jd[i],1)
}
color = "#C0C0C0"
Line(30,140,i*30+30,140)
Line(30,140,30,260)
// 餅圖
color = "#00FF00"
var gc = new Array(
150,120,200,180,180
)
var s = 0
var m = 0
var n = 0
for(i=0;i<gc.length;i++) {
s +=gc[i]
if(gc[i] > m) {
m = gc[i]
n = i
}
}
var k = s/360
var mm = 0
var a =0
for(i=0;i<gc.length;i++) {
b = Math.round((gc[i]+mm)/k)
if(i==n)
PopPei(600,150,100,a,b)
else
Pei(600,150,100,a,b)
biaozhu(60,a+(b-a)/2,Math.round(gc[i]/s*100)+"%",2)
mm = mm+gc[i]
a = b
} // 十字標注
MoveTo(280,20)
zhunxing(xo,yo) }else {
document.write("<p> </p><table bgcolor=#FF0000><tr><td><font color=#FFFF00>對不起！您的瀏覽器不能支持該頁的某些功能，請換用IE4.0以上版本的瀏覽器！謝謝！</font></td></tr></table>")
}
</script> </body>
</html>

VML的一个链接：§http://www.blueidea.com/bbs/newsdetail.asp?id=473684一个饼图的例子：（QQ2644779 ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<script>
function drawLinesX(m)
{
count=0; //画横坐标
var textPoint=1;
for(var i=1;i<=10;i++){
    var py=2750-i*245;
    var strTo=m+" "+py;
    var newLine = document.createElement("<v:line from='200 "+py+"' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");
    group1.insertBefore(newLine);
    if(count%2!=0){
    var newStroke = document.createElement("<v:stroke color='#c0c0c0'>");
    newLine.insertBefore(newStroke);
        var newShape= document.createElement("<v:shape style='position:absolute;left:0;top:"+(py-50)+";WIDTH:1000px;HEIGHT:200px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")
        group1.insertBefore(newShape);
        var newText = document.createElement("<v:textbox id='tx"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
        newShape.insertBefore(newText);
        newText.innerText=textPoint;
        textPoint++;
}
else
{
    var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
    newLine.insertBefore(newStroke);
}
count++;
}
}
function drawLinesY(n)
{
var textPoint=1;
for(var i=1;i<=n;i++){
    var py=170+i*300;
    var newLine = document.createElement("<v:line from='"+py+" 2700' to='"+py+" 2750' style='position:absolute;z-index:8'></v:line>");
    group1.insertBefore(newLine);
    var newStroke = document.createElement("<v:stroke color='black'>");
    newLine.insertBefore(newStroke);
    var newShape= document.createElement("<v:shape style='position:absolute;left:"+(py-50)+";top:2750;WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")
    group1.insertBefore(newShape);
    var newText = document.createElement("<v:textbox id='ty"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
    newShape.insertBefore(newText);
newText.innerHTML=textPoint;
    textPoint++;
}
}
function drawBar(v,t)
{
  var h=v*245-50;
  var px=2750-v*245;
  var py=170+t*300;
  var newShape= document.createElement("<v:rect style='position:absolute;left:"+py+";top:"+px+";WIDTH:190px;HEIGHT:"+h+"px;z-index:9' coordsize='21600,21600' fillcolor='blue'></v:rect>")
  group1.insertBefore(newShape);
}
function drawBars()
{
drawBar(6,1);
drawBar(5,2);
drawBar(6,3);
drawBar(8,4);
drawBar(3,5);
drawBar(1,6);
drawBar(9,7);
drawBar(2,8);
drawBar(6,9);
drawBar(5,10);
drawBar(7,11);
drawBar(3,12);
}
</script>
<body onload="drawLinesX(4500);drawLinesY(13)">
<table align="center">
<tr>
<td align="center" class="title"><strong>数据图表</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
    <strong>柱状图</strong>：柱状图是由矩形组成的，量体现在它的高度上。我们还是先画坐标，因为柱状图主要体现它的高度，所以一般只画横坐标线。<br>
    <button onclick="drawBars()">显示柱状图</button><br><br>
<v:group ID="group1" style="WIDTH:700px;HEIGHT:500px" coordsize="4900,3500">
<v:line from="200,100" to="200,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
<v:stroke StartArrow="classic"/>
</v:line>
<v:line from="200,2700" to="4500,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:rect style="WIDTH:4600px;HEIGHT:2900px" coordsize="21600,21600" fillcolor="white" strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
</v:rect>
        <v:shape style="position:absolute;left:50;top:2650;WIDTH:1000px;HEIGHT:200px;z-index:8" coordsize="21600,21600" fillcolor="white">
            <v:textbox id="text1" inset="3pt,0pt,3pt,0pt" align="center" style="font-size:10pt;v-text-anchor:bottom-center-baseline">0</v:textbox>
        </v:shape>
</v:group><br>
    你可以点右键查看源代码。可以得到一些方法，不过我编写这些的时候，特别是数据和坐标转换还没有找到通用的规律。所以需要耐心去拼凑。你在应用VML做图表的时候，首先生成坐标，然后根据 x ,y 的范围，
把横纵坐标轴化分一下，然后就可以根据化分的结果就可以得到 x,y 坐标和值的关系了。<br>
    接下来将讲饼图(Pie)。
<p align="right">第 <a href="step31.html">1</a> <strong style="color:red">2</strong> <a href="step313.html">3</a> 页</p>
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目录</a><br>
上一节:<a href="step23.html">给VML增加事件</a><br>
下一节:<a href="step32.html">矢量地图</a>
</td>
</tr>
</table>
</body>
</html>

http://www.javaworld.com/javaworld/jw-05-2000/jw-0505-servlets.html
这个是完全可以利用的.自己也可以改装一下,让它更适合自己的需要.我就用它来显示过图片,在html里加入这样的标记:
<img src="/servlet/ImageServlet?">就可以显示图片了,还可以加参数.

其实使用servlet进行画图就可以了
如果需要给跟我联系
我做过趋势图和统计图

weidegong(weidegong) 能不能给出个饼图的代码啊，这段代码的网址是什么？？？谢谢了

weidegong(weidegong) 能不能给出个饼图的例子啊，网址在哪里啊

调试易

在JSP页面上画一张分析图，谢谢！

解决方案 »