[分享]VML实现的饼图

最新推荐文章于 2024-04-30 16:57:21 发布
iteye_11946
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量119
点赞数
文章标签： javascript ViewUI
以前收集的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.οnmοuseοver="LegendMouseOverEvent()";  
 //objColor.οnmοuseοut="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>
 <bodyοnlοad="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"οnchange="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>
 
iteye_11946
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[分享]VML实现的饼图

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

扫一扫