以前收集的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>