[分享]VML实现的饼图

cgs1999
浏览: 536428 次
性别:
来自: 上海
最近访客更多访客>>

Spring_g
无象心
mrkou
liunancun
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

以前收集的VML实现的饼图vml_pie.html，感谢提供该代码的前辈，现将代码分享，代码如下：
<htmlxmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>

<metaname="GENERATOR"content="MicrosoftVisualStudio.NET7.1">

<metaname="ProgId"content="VisualStudio.HTML">

<metaname="Originator"content="MicrosoftVisualStudio.NET7.1">

<STYLE>v/:*{BEHAVIOR:url(#default#VML)}

o/:*{BEHAVIOR:url(#default#VML)}

.shape{BEHAVIOR:url(#default#VML)}
</STYLE>

<scriptlanguage="javascript">
functionAdd(){

varshape=document.createElement("v:shape");

shape.type="#tooltipshape";

shape.style.width="150px";

shape.style.height="150px";

shape.coordsize="21600,21600";

shape.fillcolor="infobackground";

vartextbox=document.createElement("v:textbox");

textbox.style.border="1pxsolidred";

textbox.style.innerHTML="测试";
shape.appendChild(textbox);
document.body.appendChild(shape);
}
functionVMLPie(pContainer,pWidth,pHeight,pCaption){

this.Container=pContainer;

this.Width=pWidth||"400px";

this.Height=pHeight||"250px";

this.Caption=pCaption||"VMLChart";

this.backgroundColor="";

this.Shadow=false;

this.BorderWidth=0;

this.BorderColor=null;

this.all=newArray();

this.RandColor=function(){

return"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
}

this.VMLObject=null;
}
VMLPie.prototype.Draw=function(){

//画外框 

varo=document.createElement("v:group");

o.style.width=this.Width;

o.style.height=this.Height;

o.coordsize="21600,21600";

//添加一个背景层 

varvRect=document.createElement("v:rect");

vRect.style.width="21600px"

vRect.style.height="21600px"
o.appendChild(vRect);

varvCaption=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){

varvShadow=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);

//开始画内部园 

varoOval=document.createElement("v:oval");

oOval.style.width="15000px";

oOval.style.height="14000px";

oOval.style.top="4000px";

oOval.style.left="1000px";

oOval.fillcolor="#d5dbfb";

//本来计划加入3D的效果，后来感觉确实不好控制，就懒得动手了 

//varo3D=document.createElement("o:extrusion"); 

varformatStyle='<v:fillrotate="t"angle="-135"focus="100%"type="gradient"/>';

//formatStyle+='<o:extrusionv: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:extrusionv: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);
}
VMLPie.prototype.CreatePie=function(vGroup){
varmX=Math.pow(2,16)*360;

//这个参数是划图形的关键 

//AExywidthheightstartangleendangle 

//xy表示圆心位置 

//widthheight形状的大小 

//startangleendangle的计算方法如下 

//2^16*度数 
varvTotal=0;
varstartAngle=0;
varendAngle=0;
varpieAngle=0;
varprePieAngle=0;

varobjRow=null;

varobjCell=null;

for(i=0;i<this.all.length;i++){

vTotal+=this.all[i].Value;
}

varobjLegendRect=document.createElement("v:rect");

varobjLegendTable=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="1pxoutset"; 

objCell.style.backgroundColor="black";

objCell.style.padding="5px";

objCell.style.color="window";

objCell.style.font="caption";

objCell.innerText="总数:"+vTotal;

varvTextbox=document.createElement("v:textbox");
vTextbox.appendChild(objLegendTable);
objLegendRect.appendChild(vTextbox);

varvShadow=document.createElement("v:shadow");

vShadow.on="t";

vShadow.type="single";

vShadow.color="graytext";

vShadow.offset="2px,2px";
objLegendRect.appendChild(vShadow);
vGroup.appendChild(objLegendRect);

varstrAngle="";

for(i=0;i<this.all.length;i++){//顺序的划出各个饼图 

varvPieEl=document.createElement("v:shape");
varvPieId=document.uniqueID;

vPieEl.style.width="15000px";

vPieEl.style.height="14000px";

vPieEl.style.top="4000px";

vPieEl.style.left="1000px";

vPieEl.coordsize="1500,1400";

vPieEl.strokecolor="white";
vPieEl.id=vPieId;

pieAngle=this.all[i].Value/vTotal;
startAngle+=prePieAngle;
prePieAngle=pieAngle;
endAngle=pieAngle;

//strAngle+=this.all[i].Name+":"+this.all[i].Value+"Start:"+startAngle+"End:"+endAngle+"/n"; 

vPieEl.path="M750700AE750700750700"+parseInt(mX*startAngle)+""+parseInt(mX*endAngle)+"xe";

vPieEl.title=this.all[i].Name+"/n所占比例:"+endAngle*100+"%/n详细描述:"+this.all[i].TooltipText;

//vPieEl.innerHTML='<v:fillrotate="t"angle="-135"focus="100%"type="gradient"/>'; 

varobjFill=document.createElement("v:fill");

objFill.rotate="t";

objFill.focus="100%";

objFill.type="gradient";
objFill.angle=parseInt(360*(startAngle+endAngle/2));
vPieEl.appendChild(objFill);

varobjTextbox=document.createElement("v:textbox");

objTextbox.border="1pxsolidblack";

objTextbox.innerHTML=this.all[i].Name+":"+this.all[i].Value;

//vPieEl.appendChild(objTextbox); 

varvColor=this.RandColor();

vPieEl.fillcolor=vColor;//设置颜色 

//开始画图例 
objRow=objLegendTable.insertRow();

objRow.style.height="16px";

varobjColor=objRow.insertCell();//颜色标记 
objColor.style.backgroundColor=vColor;

objColor.style.width="16px";
objColor.PieElement=vPieId;

objColor.attachEvent("onmouseover",LegendMouseOverEvent);

objColor.attachEvent("onmouseout",LegendMouseOutEvent);

//objColor.onmouseover="LegendMouseOverEvent()"; 

//objColor.onmouseout="LegendMouseOutEvent()"; 
objCell=objRow.insertCell();

objCell.style.font="icon";

objCell.style.padding="3px";

objCell.innerText=this.all[i].Name+":"+this.all[i].Value;
vGroup.appendChild(vPieEl);
}
}
VMLPie.prototype.Refresh=function(){
}
VMLPie.prototype.Zoom=function(iValue){
varvX=21600;
varvY=21600;

this.VMLObject.coordsize=parseInt(vX/iValue)+","+parseInt(vY/iValue);
}
VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){

varoData=newObject();
oData.Name=sName;
oData.Value=sValue;
oData.TooltipText=sTooltipText;

variCount=this.all.length;

this.all[iCount]=oData;
}
VMLPie.prototype.Clear=function(){

this.all.length=0;
}
functionLegendMouseOverEvent(){

vareSrc=window.event.srcElement;

eSrc.border="1pxsolidblack";
}
functionLegendMouseOutEvent(){

vareSrc=window.event.srcElement;

eSrc.border="";
}

varobjPie=null;

//以下是函数调用 
functionDrawPie(){

objPie=newVMLPie(document.body,"600px","450px","人口统计图");

//objPie.BorderWidth=3; 

//objPie.BorderColor="blue"; 

//objPie.Width="800px"; 

//objPie.Height="600px"; 

objPie.backgroundColor="#ffffff";

objPie.Shadow=true;

objPie.AddData("北京",10,"北京的人口");

objPie.AddData("上海",52,"上海的固定人口");

objPie.AddData("天津",30,"天津的外地人口");

objPie.AddData("西安",58,"西安城市人口");

objPie.AddData("武汉",30,"武汉的外地人口");

objPie.AddData("重庆",58,"重庆城市人口");
objPie.Draw();

//alert(document.body.outerHTML); 
}
</script>
</head>

<bodyonload="DrawPie()">

<v:shapetypeid="tooltipshape"coordsize="21600,21600"o:spt="106"path="ar0,7165,4345,13110,1950,7185,1080,12690at475,11732,4835,17650,1080,12690,2910,17640at2387,9757,10107,20300,2910,17640,8235,19545at7660,12382,14412,21597,8235,19545,14280,18330at12910,11080,18695,18947,14280,18330,18690,15045at14822,5862,21597,15082,18690,15045,20895,7665at15772,2592,21105,9865,20895,7665,19140,2715at14330,0,19187,6595,19140,2715,14910,1170at10992,0,15357,5945,14910,1170,11250,1665at6692,650,12025,7917,11250,1665,7005,2580at1912,1972,8665,11162,7005,2580,1950,7185xear0,7165,4345,13110,1080,12690,2340,13080nfear475,11732,4835,17650,2910,17640,3465,17445nfear7660,12382,14412,21597,7905,18675,8235,19545nfear7660,12382,14412,21597,14280,18330,14400,17370nfear12910,11080,18695,18947,18690,15045,17070,11475nfear15772,2592,21105,9865,20175,9015,20895,7665nfear14330,0,19187,6595,19200,3345,19140,2715nfear14330,0,19187,6595,14910,1170,14550,1980nfear10992,0,15357,5945,11250,1665,11040,2340nfear1912,1972,8665,11162,7650,3270,7005,2580nfear1912,1972,8665,11162,1950,7185,2070,7890nfem@23@37qx@35@24@23@36@34@24@23@37xem@16@33qx@31@17@16@32@30@17@16@33xem@38@29qx@27@39@38@28@26@39@38@29xe"

adj="1350,25920">
<v:formulas>

<v:feqn="sum#0010800"></v:f>

<v:feqn="sum#1010800"></v:f>

<v:feqn="cosatan210800@0@1"></v:f>

<v:feqn="sinatan210800@0@1"></v:f>

<v:feqn="sum@2108000"></v:f>

<v:feqn="sum@3108000"></v:f>

<v:feqn="sum@40#0"></v:f>

<v:feqn="sum@50#1"></v:f>

<v:feqn="mod@6@70"></v:f>

<v:feqn="prod600111"></v:f>

<v:feqn="sum@80@9"></v:f>

<v:feqn="prod@1013"></v:f>

<v:feqn="prod60031"></v:f>

<v:feqn="sum@11@120"></v:f>

<v:feqn="prod@13@6@8"></v:f>

<v:feqn="prod@13@7@8"></v:f>

<v:feqn="sum@14#00"></v:f>

<v:feqn="sum@15#10"></v:f>

<v:feqn="prod60081"></v:f>

<v:feqn="prod@1121"></v:f>

<v:feqn="sum@18@190"></v:f>

<v:feqn="prod@20@6@8"></v:f>

<v:feqn="prod@20@7@8"></v:f>

<v:feqn="sum@21#00"></v:f>

<v:feqn="sum@22#10"></v:f>

<v:feqn="prod60021"></v:f>

<v:feqn="sum#06000"></v:f>

<v:feqn="sum#00600"></v:f>

<v:feqn="sum#16000"></v:f>

<v:feqn="sum#10600"></v:f>

<v:feqn="sum@16@250"></v:f>

<v:feqn="sum@160@25"></v:f>

<v:feqn="sum@17@250"></v:f>

<v:feqn="sum@170@25"></v:f>

<v:feqn="sum@23@120"></v:f>

<v:feqn="sum@230@12"></v:f>

<v:feqn="sum@24@120"></v:f>

<v:feqn="sum@240@12"></v:f>

<v:feqn="sum#000"></v:f>

<v:feqn="sum#100"></v:f>
</v:formulas>

<v:patho:connectlocs="67,10800;10800,21577;21582,10800;10800,1235;@38,@39"o:extrusionok="f"

o:connecttype="custom"textboxrect="2977,3262,17087,17337"></v:path>
<v:handles>

<v:hposition="#0,#1"></v:h>
</v:handles>

<o:complexv:ext="view"></o:complex>
</v:shapetype>

<selectid="zoom"onchange="objPie.Zoom(this.value)">

<optionvalue="0.2"selected=true>20%</option>

<optionvalue="0.25">25%</option>

<optionvalue="0.4">40%</option>

<optionvalue="0.5">50%</option>

<optionvalue="0.75">75%</option>

<optionvalue="0.8">80%</option>

<optionvalue="1">原始大小</option>

<optionvalue="1.25">125%</option>

<optionvalue="1.5">150%</option>

<optionvalue="2">200%</option>

<optionvalue="3">300%</option>

<optionvalue="4">400%</option>
</select>
</body>
</html>