基于VML实现的饼图
采用JavaScript和VML做了一个饼图的Class,以下是源代码,欢迎大家下载并提供一点意见
--------------------------------------------------------
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<STYLE> v\:* { BEHAVIOR: url(#default#VML) }
o\:* { BEHAVIOR: url(#default#VML) }
.shape { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="javascript">
function VMLPie(pWidth,pHeight,pCaption,pContainer){
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.id=document.uniqueID;
this.RandColor=function(){
return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";
}
this.VMLObject=null;
this.LegendObject=null;
}
/////////////////////////////////////////////////////////////////////////////////////////////////
//接口功能:
// 开始画图,将图形画到指定的容器上面
/////////////////////////////////////////////////////////////////////////////////////////////////
VMLPie.prototype.Draw=function(){
//画外框
var o=document.createElement("v:group");
o.id=this.id;
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.preSize="24";
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;
//开始画内部园
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=' <v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';
//formatStyle+='<o:extrusion v:ext="view" color="#9cf" on="t" rotationangle="-15"';
//formatStyle+=' viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="105"';
//formatStyle+=' lightposition="0,50000" lightposition2="0,-50000"/>';
formatStyle+='<o:extrusion v:ext="view" backdepth="1in" on="t" viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="90" lightposition="-50000" lightposition2="50000" type="perspective"/>';
oOval.innerHTML=formatStyle;
//o.appendChild(oOval);
this.CreatePie(o);
return o.outerHTML;
//this.Container.appendChild(o); //插入
}