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> 
<style></style><style bogus="1">v\:*{behavior:url(#default#vml)}/*声明v为vml变量*/</style> 
</head>

<body onload="InitVRML();"> 
<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);

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

</center> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]