中文XML论坛--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>

<%
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>

<text x="600" y="200" style="font-size :30;fill:red " >The record is :</text>

<text id="record" x="850" y="200" style="font-size :30;fill:red " > </text>

<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;"/>

<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;"/>

<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>


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	125.000ms