-- 作者：求索
-- 发布时间：1/7/2006 2:34:00 PM
-- jsp页面生成柱状图——源代码[转帖]
柱状图生成源码 1.jsp
//给定要显示的柱的个数 <%@ page contentType="text/html;charset=gb2312"%>
<html> <form name="form" action="2.jsp" >
<table align=center>
<tr><td><b>统计项目个数</b></td></tr>
<td><input type="text" name="num" value="" size="8"></td>
</tr>
<td ><input type="reset" name="Reset" value="clear"></td>
<td align=center><input type="submit" name="Submit2" value="Let's Go"></td>
</table>
</html>
2.jsp
//给出对应个数的数据的id和num
<%@ page contentType="text/html;charset=gb2312"%>
<html>
<title>demo</title>
<% int i=0;
int j=0; i = Integer.parseInt(request.getParameter("num"));
%> <form name="inputform1" action="3.jsp">
<table align=center>
<% for(j=0;j<i;j++){ %>
<tr>
<td><b>ID<%=j+1%></b></td>
<td><input type="text" name="id<%=j+1%>" value="" size="8"></td>
<td><b>NUM<%=j+1%></b></td>
<td><input type="text" name="num<%=j+1%>" value="" size="8"></td>
</tr>
<%}%>
<tr> <td><b>个数</b></td>
<td><input type="text" name="num" value="<%=i%>" size="8"></td>
</tr>
<tr>
<td align=center ><input type="reset" name="Reset" value="clear"></td>
<td align=center><input type="submit" name="Submit2" value="Let's Go"></td>
</tr> </table>
</form> </html> 3.jsp
//具体生成图形，包含js代码 <%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<html>
<title>数据统计表</title>
<script language="javascript"> var root;
var svg;
var canvas;
var array = new Array;
var array1 = new Array;
var array2 = new Array; var points1;
var points2;
var m;
function init_2D(n,color,cor_x,cor_y,cor_name,rate)
{
root = id1.getSVGDocument();
canvas = root.getElementById( "canvas" );
m=600/n ; for (j=0,k=0; j <590; j +=m,k++)
{
var obj_rect = new_rectangle(j,600,m/3,0,color);
array.push( obj_rect );
canvas.appendChild( obj_rect );
}
var obj_x = new_text(630,650,cor_x);
canvas.appendChild( obj_x );
var obj_y = new_text(-100,-100,cor_y);
canvas.appendChild( obj_y );
var obj_b = new_text(300,-100,cor_name)
canvas.appendChild( obj_b );
var text1=new_text(-100,10,Math.round(600*rate));
var text2=new_text(-100,110,Math.round(500*rate));
var text3=new_text(-100,210,Math.round(400*rate));
var text4=new_text(-100,310,Math.round(300*rate));
var text5=new_text(-100,410,Math.round(200*rate));
var text6=new_text(-100,510,Math.round(100*rate));
canvas.appendChild( text1 );
canvas.appendChild( text2 );
canvas.appendChild( text3 );
canvas.appendChild( text4 );
canvas.appendChild( text5 );
canvas.appendChild( text6 );
}
function init_3D(n,color,cor_x,cor_y,cor_name,rate)
{
root = id1.getSVGDocument();
canvas = root.getElementById( "canvas" );
m=600/n ; for (j =0,k=0; j <600; j +=m,k++)
{
var obj_rect = new_rectangle(j,580,m/3,20,color);
array.push( obj_rect );
canvas.appendChild( obj_rect ); var obj_polygon1= new_polygon_1(j,580,m/3,color);
array1.push( obj_polygon1);
canvas.appendChild( obj_polygon1 ); var obj_polygon2= new_polygon_2(j,580,m/3,color);
array2.push( obj_polygon2);
canvas.appendChild( obj_polygon2 );
// var obj_x_text= new_text(j,630,item);
// canvas.appendChild( obj_x_text );
} var obj_x = new_text(630,650,cor_x);
canvas.appendChild( obj_x ); var obj_y = new_text(-150,-100,cor_y);
canvas.appendChild( obj_y ); var obj_b = new_text(300,-100,cor_name)
canvas.appendChild( obj_b );
var text1=new_text(-100,10,Math.round(600*rate));
var text2=new_text(-100,110,Math.round(500*rate));
var text3=new_text(-100,210,Math.round(400*rate));
var text4=new_text(-100,310,Math.round(300*rate));
var text5=new_text(-100,410,Math.round(200*rate));
var text6=new_text(-100,510,Math.round(100*rate));
canvas.appendChild( text1 );
canvas.appendChild( text2 );
canvas.appendChild( text3 );
canvas.appendChild( text4 );
canvas.appendChild( text5 );
canvas.appendChild( text6 );
} function put_text(j,item)
{ root = id1.getSVGDocument();
canvas = root.getElementById( "canvas" );
var obj_x_text= new_text(j,630,item);
canvas.appendChild( obj_x_text );
}
function new_rectangle( x,y,w,h,color)
{
var rectangle = root.createElement( 'rect' );
rectangle.setAttribute( 'x', x );
rectangle.setAttribute( 'y', y );
rectangle.setAttribute( 'width', w );
rectangle.setAttribute( 'height', h );
var style = rectangle.getStyle();
style.setProperty('fill', color);
return rectangle; } function new_text(x,y,item)
{ var text=root.createElement('text');
text.setAttribute('x',x);
text.setAttribute('y',y);
text.setAttribute('fill','black');
text.setAttribute('font-size',30);
var textnode=root.createTextNode(item);
text.appendChild(textnode);
return text;
} function new_polygon_1(x,y,w,color)
{ var polygon1=root.createElement('polygon');
points1=x+','+y+' '+(x+20)+','+(y-20)+' '+(x+20+w)+','+(y-20)+' '+(x+w)+','+y ;
polygon1.setAttribute('points',points1);
polygon1.setAttribute('fill',color);
return polygon1;
} function new_polygon_2(x,y,w,color)
{
var polygon2=root.createElement('polygon');
points2=(x+w)+','+y+' '+(x+w+20)+','+(y-20)+' '+(x+w+20)+', 590'+' '+(x+w)+', 600';
polygon2.setAttribute('points',points2);
polygon2.setAttribute('fill',color);
return polygon2;
} function SetHeight2(num,i)
{
var obj = array[i];
obj.setAttribute("y",600-num);
obj.setAttribute("height",num);
} function SetHeight(num,i,x)
{
var obj = array[i];
obj.setAttribute("y",600-num);
obj.setAttribute("height",num); points1=(x)+','+(600-num)+' '+(x+20)+','+(600-num-20)+' '+(x+m/3+20)+', '+(600-num-20)+' ' +(x+m/3)+ ','+(600-num);
var obj1 = array1[i];
obj1.setAttribute("points",points1 );
points2=(x+m/3)+','+(600-num)+' '+(x+m/3+20)+','+(600-num-20)+' '+(x+m/3+20)+', 590'+' '+(x+m/3)+','+600;
var obj2 = array2[i];
obj2.setAttribute("points",points2 );
} function GetHeight(i,rate) {
var obj=array[i];
var long=obj.getAttribute("height");
Record_num=root.getElementById("record");
Record_num.firstChild.data = long*rate;
}
function NotGetHeight()
{
Record_num=root.getElementById("record");
Record_num.firstChild.data = " ";
} </script>
<body> <embed name="id1" pluginspage=http://www.adobe.com/svg/viewer/install/ align="top" src="3.svg" height="600px" width="600px" type="image/svg+xml"> <%
String[] id=new String[12]; int[] num=new int[12];
int i,j,p; int max;double rate; i= Integer.parseInt(request.getParameter("num")); for(j=0;j<i;j++)
{
num[j] = Integer.parseInt(request.getParameter("num"+(j+1)));
id[j] = (String) request.getParameter("id"+(j+1));
}
max=num[0];
for( j=0;j<i;j++)
if(num[j]>=max) max=num[j]; if(max>=600)
{
if(max%600==0) rate=max/600.00;
else rate=max/600+1;
}
else rate=max/600.00; p=600/i;
%>
<table>
<tr>
<% for(j=0;j<i;j++) { %>
<td>
<a href="javascript:SetHeight(<%=num[j]/rate%>,<%=j%>,<%=j%>*<%=p%>)"
onclick="SetHeight(<%=num[j]/rate%>,<%=j%>,<%=j%>*<%=p%>);put_text(<%=j%>*<%=p%>,'<%=id[j]%>')" onmouseover="GetHeight(<%=j%>,<%=rate%>); " onmouseout= " "> <%=id[j]%> </a>
</td>
<% } %>
</tr>
</table>
<form name="inputform2">
<table>
<tr>
<td><b>横坐标名称</b></td>
<td><input type="text" name="x" value="" size="8"></td>
<td><b>纵坐标名称</b></td>
<td><input type="text" name="y" value="" size="8"></td>
<td><b>统计表标题</b></td>
<td><input type="text" name="name" value="" size="15"></td>
<td><b>颜色</b></td>
<td><input type="text" name="color" value="" size="6"></td>
<td><input type="button" value="绘图"
onclick="init_3D(<%=i%>,document.inputform2.color.value,
document.inputform2.x.value,document.inputform2.y.value,document.inputform2.name.value,<%=rate%>)">
</td>
</tr>
</table>
</form> </body>
</html> 3.svg
//svg文件 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="1200" height="900" viewBox=" -300 200 1300 100" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="canvas"></g> <g>
<text x="600" y="200" style="font-size :30;fill:red " >The record is :</text> <!-- display the record-->
<text id="record" x="850" y="200" style="font-size :30;fill:red " > </text> <!-- the vertical -->
<line x1="0" y1="600" x2="0" y2="-100" style="fill:red;stroke:red;srtoke-width:3;"/>
<polygon points=" -10,-100 0,-110 10,-100" style="fill:red;stroke:red;srtoke-width:3;"/> <!-- the horizontal -->
<line x1="0" y1="600" x2="620" y2="600" style="fill:red;stroke:red;srtoke-width:3;"/>
<polygon points=" 620,590 630,600 620,610" style="fill:red;stroke:red;srtoke-width:3;"/>
<!-- the unit -->
<line x1="0" y1="0" x2="600" y2="0" />
<line x1="0" y1="100" x2="600" y2="100" />
<line x1="0" y1="200" x2="600" y2="200" />
<line x1="0" y1="300" x2="600" y2="300" />
<line x1="0" y1="400" x2="600" y2="400" />
<line x1="0" y1="500" x2="600" y2="500" />
</g>
</svg>
|