[Share] VML implementation pie

Previously collected VML implementation pie vml_pie.html, thank predecessors provide the code, the code will now share the following code:
 
  <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 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 "test" ;
 shape.appendChild(textbox); 
 document.body.appendChild(shape);
}
VMLPie function (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(){
 // draw frame 
  var o=document.createElement("v:group");
  o.style.width=this.Width;
  o.style.height=this.Height;
  o.coordsize="21600,21600";
 // add a background layer 
  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);
 // set the border size  
  if(this.BorderWidth){
   vRect.strokeweight=this.BorderWidth;
  }
 // set the border color 
  if(this.BorderColor){
   vRect.strokecolor=this.BorderColor;
  }
 // set the background color 
  if(this.backgroundColor){  
   vRect.fillcolor=this.backgroundColor;
  }
 // set whether shadowing 
  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);
  
 // start painting the interior garden 
  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";
  
  // originally planned to join the 3D effect, control then feel really bad, too lazy to hands 
  //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);  
  
}
VMLPie.prototype.CreatePie=function(vGroup){
  was mX = Math.pow (2.16) * 360;
  // This parameter is the key to draw graphics  
  //AE x y width height startangle endangle 
  // x y represents the center position 
  // width size height shape 
  // startangle endangle calculated as follows 
  // 2 ^ 16 * degrees  
  
  was vTotal = 0;
  each start angle = 0;
  was endAngle = 0;
  was pieAngle = 0;
  was prePieAngle = 0;
  
  was objRow = null ;
  was objCell = null ;
  
  for(i=0;i<this.all.length;i++){
   vTotal+=this.all[i].Value;
  }
  
  var objLegendRect=document.createElement("v:rect");
  
  var objLegendTable=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="1px outset"; 
  objCell.style.backgroundColor="black";
  objCell.style.padding="5px";
  objCell.style.color="window";
  objCell.style.font="caption";
  = objCell.innerText "Total:" + Vtotal;
  
  
  var vTextbox=document.createElement("v:textbox");  
  vTextbox.appendChild(objLegendTable);
  objLegendRect.appendChild(vTextbox);
  
  var vShadow=document.createElement("v:shadow");
  vShadow.on="t";
  vShadow.type="single";
  vShadow.color="graytext";
  vShadow.offset="2px,2px";
  objLegendRect.appendChild(vShadow);
  
  
  vGroup.appendChild(objLegendRect);  
  
  var strAngle="";
  for (I = 0; I < the this .all.length; I ++) {  // each pie draw order
   var vPieEl=document.createElement("v:shape");
   var vPieId=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;
   start angle + = prePieAngle;
   prePieAngle=pieAngle;
   endAngle=pieAngle; 
   
   //strAngle+=this.all[i].Name +":" +this.all[i].Value+ " Start:"+startAngle +"  End:"+ endAngle +"/n"; 
   
   vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";
   = vPieEl.title the this .all [I] .Name + "/ n-proportion:" + * 100 + endAngle "% / n-Detailed Description:"  + the this .all [I] .TooltipText;
   
   //vPieEl.innerHTML='<v:fill  rotate="t" angle="-135" focus="100%" type="gradient"/>'; 
   var objFill=document.createElement("v:fill");
   objFill.rotate="t";
   objFill.focus="100%";
   objFill.type="gradient";
   objFill.angle=parseInt( 360 * (startAngle + endAngle /2));
   vPieEl.appendChild(objFill);
   
   var objTextbox=document.createElement("v:textbox");
   objTextbox.border="1px solid black";
   objTextbox.innerHTML=this.all[i].Name +":" + this.all[i].Value;
   //vPieEl.appendChild(objTextbox); 
   
   var vColor=this.RandColor();
   = Vcolor vPieEl.fillcolor;  // set the color
   // legend began to draw 
   objRow=objLegendTable.insertRow();
   objRow.style.height="16px";
   
   objRow.insertCell objColor = var (); // color marking
   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){
 There vx = 21,600;
 var vY = 21600;
 this.VMLObject.coordsize=parseInt(vX / iValue) +","+parseInt(vY /iValue);
}
VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){
 var oData=new Object();
 oData.Name=sName;
 oData.Value=sValue;
 oData.TooltipText=sTooltipText;
 var iCount=this.all.length;
 this.all[iCount]=oData;
}
VMLPie.prototype.Clear=function(){
 this.all.length=0;
}
function LegendMouseOverEvent(){
 var eSrc=window.event.srcElement;
 eSrc.border="1px solid black";
}
function LegendMouseOutEvent(){
 var eSrc=window.event.srcElement;
 eSrc.border="";
}
was objPie = null ;
// The following is a function call 
function DrawPie(){
 = objPie new new  VMLPie (the document.body, "600px" , "450px" , "demographic FIG." );
 //objPie.BorderWidth=3; 
 //objPie.BorderColor="blue"; 
 //objPie.Width="800px"; 
 //objPie.Height="600px"; 
 objPie.backgroundColor="#ffffff";
 objPie.Shadow=true;
 objPie.AddData ( "Beijing" , 10, "Beijing's population" );
 objPie.AddData ( "Shanghai" , 52, "Shanghai's fixed population" );
 objPie.AddData ( "Tianjin" , 30, "Tianjin's foreign population" );
 objPie.AddData ( "Xi'an" , 58, "Xi'an urban population" );
 objPie.AddData ( "Wuhan" , 30, "Wuhan foreign population" );
 objPie.AddData ( "Chongqing" , 58, "Chongqing's urban population" );
 objPie.Draw();
 //alert(document.body.outerHTML); 
}
  </script>
 </head>
 <body onload="DrawPie()">
  <v:shapetype id="tooltipshape" coordsize="21600,21600" o:spt="106" path="Ar0,7165,4345,13110,1950,7185,1080,12690 at475,11732,4835,17650,1080,12690,2910,17640 at2387,9757,10107,20300,2910,17640,8235,19545 at7660,12382, 14412,21597,8235,19545,14280,18330 at12910,11080,18695,18947,14280,18330,18690,15045 at14822,5862,21597,15082,18690,15045,20895,7665 at15772,2592,21105,9865,20895 , 7665,19140,2715 at14330,0,19187,6595,19140,2715,14910,1170 at10992,0,15357,5945,14910,1170,11250,1665 at6692,650,12025,7917,11250,1665,7005, 2580 at1912,1972,8665,11162,7005,2580,1950,7185 xe ar0,7165,4345,13110,1080,12690,2340,13080 nf e ar475,11732,4835,17650,2910,17640,3465,17445 nf e ar7660,12382,14412,21597,7905,18675,8235,19545 nf e ar7660,12382,14412,21597,14280,18330,14400,17370 nf e ar12910,11080,18695,18947,18690,15045,17070,11475 nf e ar15772,2592,21105,9865,20175,9015,20895,7665 nf e ar14330,0,19187,6595,19200,3345,19140,2715 nf e ar14330,0,19187,6595,14910,1170,14550,1980 nf e ar10992,0,15357,5945,11250,1665,11040,2340 nf e ar1912,1972,8665,11162,7650,3270,7005 , 2580 nf e ar1912,1972,8665,11162,1950,7185,2070,7890 nf em @ 23 @ 37 @ 35 @ qx 24 @ 23 @ 36 @ 34 @ 24 @ 23 @ 37 @ 16 @ xem 33 qx @ 31 @ 17 @ 16 @ 32 @ 30 @ 17 @ 16 @ 33 @ 38 @ xem 29 qx @ 27 @ 39 @ 38 @ 28 @ 26 @ 39 @ 38 @ 29 xe "
   adj="1350,25920">
   <v:formulas>
    <v:f eqn="sum #0 0 10800 "></v:f>
    <v:f eqn="sum #1 0 10800 "></v:f>
    <v:f eqn="cosatan2 10800 @0 @1 "></v:f>
    <v:f eqn="sinatan2 10800 @0 @1 "></v:f>
    <v:f eqn="sum @2 10800 0 "></v:f>
    <v:f eqn="sum @3 10800 0 "></v:f>
    <v:f eqn="sum @4 0 #0 "></v:f>
    <v:f eqn="sum @5 0 #1 "></v:f>
    <v:f eqn="mod @6 @7 0 "></v:f>
    <v:f eqn="prod 600 11 1 "></v:f>
    <v:f eqn="sum @8 0 @9 "></v:f>
    <v:f eqn="prod @10 1 3 "></v:f>
    <v:f eqn="prod 600 3 1 "></v:f>
    <v:f eqn="sum @11 @12 0 "></v:f>
    <v:f eqn="prod @13 @6 @8 "></v:f>
    <v:f eqn="prod @13 @7 @8 "></v:f>
    <v:f eqn="sum @14 #0 0 "></v:f>
    <v:f eqn="sum @15 #1 0 "></v:f>
    <v:f eqn="prod 600 8 1 "></v:f>
    <v:f eqn="prod @11 2 1 "></v:f>
    <v:f eqn="sum @18 @19 0 "></v:f>
    <v:f eqn="prod @20 @6 @8 "></v:f>
    <v:f eqn="prod @20 @7 @8 "></v:f>
    <v:f eqn="sum @21 #0 0 "></v:f>
    <v:f eqn="sum @22 #1 0 "></v:f>
    <v:f eqn="prod 600 2 1 "></v:f>
    <v:f eqn="sum #0 600 0 "></v:f>
    <v:f eqn="sum #0 0 600 "></v:f>
    <v:f eqn="sum #1 600 0 "></v:f>
    <v:f eqn="sum #1 0 600 "></v:f>
    <v:f eqn="sum @16 @25 0 "></v:f>
    <v:f eqn="sum @16 0 @25 "></v:f>
    <v:f eqn="sum @17 @25 0 "></v:f>
    <v:f eqn="sum @17 0 @25 "></v:f>
    <v:f eqn="sum @23 @12 0 "></v:f>
    <v:f eqn="sum @23 0 @12 "></v:f>
    <v:f eqn="sum @24 @12 0 "></v:f>
    <v:f eqn="sum @24 0 @12 "></v:f>
    <v:f eqn="sum #0 0 0 "></v:f>
    <v:f eqn="sum #1 0 0 "></v:f>
   </v:formulas>
   <v:path o: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:h position="#0,#1"></v:h>
   </v:handles>
   <o:complex v:ext="view"></o:complex>
  </v:shapetype>
  <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" > Original Size </ 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>
</html>
 
 
[Share] VML implementation pie

Guess you like
