以下是从网上找到的一段JavaScript实现图形报表的代码: <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> VRML Report</title> <mce:style><!-- v/:*{behavior:url(#default#vml)}/*声明v为vml变量*/ --></mce:style><style mce_bogus="1">v/:*{behavior:url(#default#vml)}/*声明v为vml变量*/</style> </head> <body οnlοad="InitVRML();"> <mce:script type="text/javascript"><!-- //模拟数据 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); } // --></mce:script> <center> <input type="button" value="初始设置" οnclick="InitVRML();"> <input type="button" value="柱状图" οnclick="Bar(RecordSetArray.length);"> <input type="button" value="饼图" οnclick="Circle(RecordSetArray.length);"> <input type="button" value="折线图" οnclick="Line(RecordSetArray.length)"> <select οnchange="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>