jsp+vml 实现柱状图、饼图、折线图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page pageEncoding="gb2312"%>
<html   xmlns:v="urn:schemas-microsoft-com:vml">  
   
  <head>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  <meta   name="GENERATOR"   content="Microsoft   FrontPage   4.0">  
  <meta   name="ProgId"   content="FrontPage.Editor.Document">  
  <title></title>  
  <style>v/:*{behavior:url(#default#vml)}/*声明v为vml变量*/</style>  
  </head>  
   
  <body   onload="InitVRML();">  
   
  <script>  
  //模拟数据  
  var   RecordSetArray=new   Array();  
  //模拟记录条数  
  var   iRecordCount=20;  
  for(iIndex=0;iIndex<iRecordCount;iIndex++)  
  {  
    var   UnitArray=new   Array();  
    UnitArray[0]=iIndex;  
    UnitArray[1]=Math.round(Math.random()*1000);  
    RecordSetArray[iIndex]=UnitArray;  
  }  
  //模拟数据Y轴最大值[范围]  
  var   iRecordMaxX=20;//模拟数据X轴最大值[范围]  
  var   iRecordMaxY=1000;//模拟数据Y轴最大值[范围]  
  //坐标系统  
  var   iScreenWidth=400;//真实宽度PX  
  var   iScreenHeight=400;//真实高度PX  
  var   iCoordSizeX=4000;//分隔宽度  
  var   iCoordSizeY=4000;//分隔高度  
  var   iCoordSizeStep=200;//坐标轴与边距  
  var   iRectSize=100;//柱状图柱体宽度  
  var   vGroup=null;//VRML区域  
  function   Line(iRecordCount)  
  {  
    VRMLID.innerHTML="";  
    InitVRML();  
    CoordSize();  
    CoordSizeLine();  
    var   iFromX=iCoordSizeStep;  
    var   iFromY=0;  
    for(iIndex=0;iIndex<iRecordCount;iIndex++)  
    {  
      var   vLine=document.createElement("v:line");  
      vLine.style.left="0";  
      vLine.style.top="0";  
      vLine.from="'"+iFromX+","+iFromY+"'";  
  iFromX=iCoordSizeStep+Math.round(RecordSetArray[iIndex][0]*(iCoordSizeX-iCoordSizeStep)/iRecordMaxX);  
  iFromY=Math.round(RecordSetArray[iIndex][1]*(iCoordSizeY-iCoordSizeStep)/iRecordMaxY);  
      vLine.to="'"+iFromX+","+iFromY+"'";  
      vLine.strokecolor="#000000";  
      vLine.strokeweight="1";  
      vLine.title="模拟数据第"+RecordSetArray[iIndex][0]+"条";  
      //var   vStroke=document.createElement("v:stroke");  
      //vStroke.EndArrow="Classic";  
      //vStroke.StartArrow="Oval";  
      //vLine.appendChild(vStroke);  
      vGroup.appendChild(vLine);  
    }    
  }  
  function   Circle(iRecordCount)  
  {  
    VRMLID.innerHTML="";  
    InitVRML();  
    var   varMax=Math.pow(2,16)*360;  
    var   vTotal=1;  
    var   vStartAngle=0;  
    var   vEndAngle=0;  
    var   vPreAngle=0;  
    for(kIndex=0;kIndex<iRecordCount;kIndex++)  
    {  
      vTotal+=RecordSetArray[kIndex][1];  
    }  
    for(iIndex=0;iIndex<iRecordCount;iIndex++)  
    {  
      var   vShape=document.createElement("v:shape");      
      vStartAngle+=vPreAngle;  
      vPreAngle=RecordSetArray[iIndex][1]/vTotal;  
                    vEndAngle=RecordSetArray[iIndex][1]/vTotal;  
   
      vShape.style.width=iCoordSizeX-2*iCoordSizeStep;  
      vShape.style.height=iCoordSizeY-2*iCoordSizeStep;  
      vShape.style.top=iCoordSizeStep;  
      vShape.style.left=iCoordSizeStep;  
      vShape.strokecolor="black";  
      vShape.fillcolor=RandColor();  
   
                    vShape.path="M   2000   2000   AE   2000   2000   2000   2000   "+parseInt(varMax*vStartAngle)+"   "+parseInt(varMax*vEndAngle)+"   xe";  
      vShape.title="第"+RecordSetArray[iIndex][0]+"块";  
      vShape._scale=parseInt(360*(vStartAngle+vEndAngle/2));  
      vGroup.appendChild(vShape);  
    }  
  }  
  function   Bar(iRecordCount)  
  {  
    VRMLID.innerHTML="";  
    InitVRML();  
    CoordSize();  
    CoordSizeLine();  
    var   iStep=Math.round(iCoordSizeX/iRecordCount);  
    for(iIndex=1;iIndex<iRecordCount;iIndex++)  
    {  
      var   iRnd=Math.round(Math.random()*(iCoordSizeY-iCoordSizeStep));  
      var   vRect=document.createElement("v:rect");  
      vRect.style.left=iStep*iIndex;  
      vRect.style.top=(iCoordSizeY-iCoordSizeStep)-Math.round(RecordSetArray[iIndex][1]*(iCoordSizeY-iCoordSizeStep)/iRecordMaxY);  
      vRect.style.width=iRectSize;  
      vRect.style.height=Math.round(RecordSetArray[iIndex][1]*(iCoordSizeY-iCoordSizeStep)/iRecordMaxY);  
      vRect.fillColor="#EEEEEE";  
      vRect.title="模拟数据第"+RecordSetArray[iIndex][0]+"条的Y轴图示";  
      vGroup.appendChild(vRect);  
    }  
  }  
  function   DrawLinesX(iMaxX,Object)  
  {  
    var   iStep=Math.round(iCoordSizeX/iMaxX);  
    for(var   iIndex=1;iIndex<=iMaxX;iIndex++)  
    {  
      var   vLine=document.createElement("v:line");  
      vLine.from=iStep*iIndex+","+(iCoordSizeY-iCoordSizeStep);  
      vLine.to=iStep*iIndex+","+(iCoordSizeY-Math.round(iCoordSizeStep/2));  
      var   vStroke=document.createElement("v:stroke");  
      vStroke.endArrow="Diamond";  
      vStroke.dashStyle="dot";  
      vLine.appendChild(vStroke);  
      Object.appendChild(vLine);  
    }  
  }  
  function   DrawLinesY(iMaxY,Object)  
  {  
    var   iStep=Math.round(iCoordSizeY/iMaxY);  
    for(var   iIndex=0;iIndex<iMaxY;iIndex++)  
    {  
      var   vLine=document.createElement("v:line");  
      vLine.from=iCoordSizeStep+","+iStep*iIndex;  
      vLine.to=Math.round(iCoordSizeStep/2)+","+iStep*iIndex;  
      var   vStroke=document.createElement("v:stroke");  
      vStroke.endArrow="Diamond";  
      vStroke.dashStyle="dot";  
      vLine.appendChild(vStroke);  
      Object.appendChild(vLine);  
    }  
  }  
  function   InitVRML()  
  {  
    VRMLID.innerHTML="";  
    vGroup=document.createElement("v:group");  
    vGroup.style.width=iScreenWidth+"px";  
    vGroup.style.height=iScreenHeight+"px";  
    vGroup.coordsize=iCoordSizeX+","+iCoordSizeY;  
     
    var   vRect=document.createElement("v:rect");  
    vRect.style.width=iCoordSizeX+"px";  
    vRect.style.height=iCoordSizeY+"px";  
    vRect.fillColor="#FFFFFF";  
    vRect.strokeColor="#000000";  
    var   vShadow=document.createElement("v:shadow");  
    vShadow.on="true";  
    vShadow.type="single";  
    vShadow.color="silver";  
    vShadow.offset="5pt,5pt";  
    vRect.appendChild(vShadow);  
    vGroup.appendChild(vRect);  
   
    VRMLID.appendChild(vGroup);  
  }  
  function   CoordSize()  
  {  
    var   vLineX=document.createElement("v:line");  
    vLineX.from=iCoordSizeStep+","+iCoordSizeStep;  
    vLineX.to=iCoordSizeStep+","+(iCoordSizeY-iCoordSizeStep);  
    var   vStrokeX=document.createElement("v:stroke");  
    vStrokeX.startArrow="classic";  
    vStrokeX.endArrow="oval";  
    vStrokeX.dashStyle="single";  
    vLineX.appendChild(vStrokeX);  
    vGroup.appendChild(vLineX);  
   
    var   vLineY=document.createElement("v:line");  
    vLineY.from=iCoordSizeStep+","+(iCoordSizeY-iCoordSizeStep);  
    vLineY.to=(iCoordSizeX-iCoordSizeStep)+","+(iCoordSizeY-iCoordSizeStep);  
    var   vStrokeY=document.createElement("v:stroke");  
    vStrokeY.startArrow="oval";  
    vStrokeY.endArrow="classic";  
    vStrokeY.dashStyle="single";  
    vLineY.appendChild(vStrokeY);  
    vGroup.appendChild(vLineY);  
  }  
  function   CoordSizeLine()  
  {  
    DrawLinesX(RecordSetArray.length,vGroup);  
    DrawLinesY(RecordSetArray.length,vGroup);  
  }  
  function   RandColor()  
  {  
    return   "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";  
  }  
  function   Zoom(iValue)  
  {  
    var   varX=4000;  
    var   varY=4000;  
    vGroup.coordsize=parseInt(varX/iValue)+","+parseInt(varY/iValue);  
  }  
  </script>  
  <center>  
  <input   type="button"   value="初始设置"   onclick="InitVRML();">  
  <input   type="button"   value="柱状图"   onclick="Bar(RecordSetArray.length);">  
  <input   type="button"   value="饼图"   onclick="Circle(RecordSetArray.length);">  
  <input   type="button"   value="折线图"   onclick="Line(RecordSetArray.length)">  
  <select   onchange="Zoom(this.value)">  
      <option   value="0.2"   selected>20%</option>  
      <option   value="0.25">25%</option>  
      <option   value="0.4">40%</option>  
      <option   value="0.5">50%</option>  
      <option   value="0.75">75%</option>  
      <option   value="0.8">80%</option>  
      <option   value="1">原始大小</option>  
      <option   value="1.25">125%</option>  
      <option   value="1.5">150%</option>  
      <option   value="2">200%</option>  
      <option   value="3">300%</option>  
      <option   value="4">400%</option>  
  </select>  
  <br>  
  <br>  
  <div   id=VRMLID></div>  
  </center>  
  </body>  
   
  </html>