当前页面: 开发资料首页 → Javascript 专题 → VML实现的饼图(JavaScript类封装)
VML实现的饼图(JavaScript类封装)
摘要: VML实现的饼图(JavaScript类封装)
心血来潮编写的一个东西,还没有完全写完,但是基本的功能已经实现
将一下代码粘贴到一个htm文件保存之后就可以查看效果
<script>
function RunVML(){
var vmlSource=vmlData.value;
var oWin=window.open("about:blank","_blank","height=400,width=600,status=yes,toolbar=no,menubar=no,location=no,resizable=yes"); var oDoc=oWin.document; oDoc.open(); oDoc.write(vmlSource); oDoc.close(); oWin.focus(); }
</script>
<textarea id=vmlData style="WIDTH: 100%; HEIGHT: 300px">
<head>
<script language="javascript">
function Add(){
var shape=document.createElement("v:shape");
shape.type="#tooltipshape";
shape.style.width="150px";
shape.style.height="150px";
shape.coordsize="21600,21600";
shape.fillcolor="infobackground";
var textbox=document.createElement("v:textbox");
textbox.style.border="1px solid red";
textbox.style.innerHTML="测试";
shape.appendChild(textbox);
document.body.appendChild(shape);
}
function VMLPie(pContainer,pWidth,pHeight,pCaption){
this.Container=pContainer;
this.Width= pWidth || "400px";
this.Height=pHeight || "250px";
this.Caption = pCaption || "VML Chart";
this.backgroundColor="";
this.Shadow=false;
this.BorderWidth=0;
this.BorderColor=null;
this.all=new Array();
this.RandColor=function(){
return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";
}
this.VMLObject=null;
}
VMLPie.prototype.Draw=function(){
//画外框
var o=document.createElement("v:group");
o.style.width=this.Width;
o.style.height=this.Height;
o.coordsize="21600,21600";
//添加一个背景层
var vRect=document.createElement("v:rect");
vRect.style.width="21600px"
vRect.style.height="21600px"
o.appendChild(vRect);
var vCaption=document.createElement("v:textbox");
vCaption.style.fontSize="24px";
vCaption.style.height="24px"
vCaption.style.fontWeight="bold";
vCaption.innerHTML=this.Caption;
vCaption.style.textAlign="center";
vRect.appendChild(vCaption);
//设置边框大小
if(this.BorderWidth){
vRect.strokeweight=this.BorderWidth;
}
//设置边框颜色
if(this.BorderColor){
vRect.strokecolor=this.BorderColor;
}
//设置背景颜色
if(this.backgroundColor){
vRect.fillcolor=this.backgroundColor;
}
//设置是否出现阴影
if(this.Shadow){
var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="4px,4px";
vRect.appendChild(vShadow);
}
this.VMLObject=o;
this.Container.appendChild(o);
//开始画内部园
var oOval=document.createElement("v:oval");
oOval.style.width="15000px";
oOval.style.height="14000px";
oOval.style.top="4000px";
oOval.style.left="1000px";
oOval.fillcolor="#d5dbfb";
//本来计划加入3D的效果,后来感觉确实不好控制,就懒得动手了
//var o3D=document.createElement("o:extrusion");
var formatStyle='
';
//formatStyle+='
';
formatStyle+='
';
oOval.innerHTML=formatStyle;
o.appendChild(oOval);
this.CreatePie(o);
}
VMLPie.prototype.CreatePie=function(vGroup){
var mX=Math.pow(2,16) * 360;
//这个参数是划图形的关键
//AE x y width height startangle endangle
//x y表示圆心位置
//width height形状的大小
//startangle endangle的计算方法如下
// 2^16 * 度数
var vTotal=0;
var startAngle=0;
var endAngle=0;
var pieAngle=0;
var prePieAngle=0;
var objRow=null;
var objCell=null;
for(i=0;i<this.all.length;i++){
vTotal+=this.all[i].Value;
}
var objLegendRect=document.createElement("v:rect");
var objLegendTable=document.createElement("table");
objLegendTable.cellPadding=0;
objLegendTable.cellSpacing=3;
objLegendTable.width="100%";
with(objLegendRect){
style.left="17000px";
style.top="4000px";
style.width="4000px";
style.height="12000px";
fillcolor="#e6e6e6";
strokeweight="1px";
}
objRow=objLegendTable.insertRow();
objCell=objRow.insertCell();
objCell.colSpan="2";
//objCell.style.border="1px outset";
objCell.style.backgroundColor="black";
objCell.style.padding="5px";
objCell.style.color="window";
objCell.style.font="caption";
objCell.innerText="总数:"+vTotal;
var vTextbox=document.createElement("v:textbox");
vTextbox.appendChild(objLegendTable);
objLegendRect.appendChild(vTextbox);
var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="2px,2px";
objLegendRect.appendChild(vShadow);
vGroup.appendChild(objLegendRect);
var strAngle="";
for(i=0;i
<select id="zoom" onchange="objPie.Zoom(this.value)">
<option value ="0.2" selected=true>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>
</body>
</textarea> 欢迎大家给我多提意见,包括程序功能的扩充,bug报告,等到将整个类实现的差不多的时候,我会写一篇文章详细说明图表的制作,另外也可以考虑封装成HTC或写一个xsl。
</td>
</tr>
<tr>
<td vAlign=top align=left height="100%">
↑返回目录
前一篇: 称三次从12球中找出唯一但不知轻重的球
后一篇: 搜索gb2312汉字在网上的频率