当前页面: 开发资料首页 → Javascript 专题 → VML实现的饼图（JavaScript类封装）
VML实现的饼图（JavaScript类封装）
摘要: VML实现的饼图（JavaScript类封装）
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">
代码如下：
<textarea class="bk" id="temp79230" onmouseover="this.select();" style="WIDTH: 90%" rows="12">
<head>
VML实现的饼图（JavaScript类封装）
<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+='
<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>
<input onclick="runEx('temp79230')" type="button" value="运行代码"/> [Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
