VML实现的饼图JavaScript类封装

Java架构师必看
发布于 2021-03-22 11:02:12
89500
代码可运行
运行总次数：0
代码可运行
<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="测试";
  shape.appendChild(textbox);
 
  document.body.appendChild(shape);
 }
function VMLPie(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(){
  //画外框
   var o=document.createElement("v:group");
   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.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;
   this.Container.appendChild(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); 
 
 }
 VMLPie.prototype.CreatePie=function(vGroup){
   var mX=Math.pow(2,16) * 360;
   //这个参数是划图形的关键
   //AE x y width height startangle endangle
   //x y表示圆心位置
   //width height形状的大小
   //startangle endangle的计算方法如下
   // 2^16 * 度数
 
   var vTotal=0;
   var startAngle=0;
   var endAngle=0;
   var pieAngle=0;
   var prePieAngle=0;
 
   var objRow=null;
   var 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="总数:"+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<this.all.length;i++){ //顺序的划出各个饼图
    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;
    startAngle+=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=this.all[i].Name +"/n所占比例:"+ endAngle * 100 +"%/n详细描述:" +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();
    vPieEl.fillcolor=vColor; //设置颜色
    //开始画图例
    objRow=objLegendTable.insertRow();
    objRow.style.height="16px";
 
    var objColor=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){
  var vX=21600;
  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="";
 }
var objPie=null;
 //以下是函数调用
 function DrawPie(){
  objPie=new VMLPie(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: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 x e 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 e m@23@37 qx@35@24@23@36@34@24@23@37 x e m@16@33 qx@31@17@16@32@30@17@16@33 x e m@38@29 qx@27@39@38@28@26@39@38@29 x e"
    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" οnchange="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">原始大小</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>
本文由来源 21aspnet，由 javajgs_com 整理编辑，其版权均为 21aspnet 所有，文章内容系作者个人观点，不代表 Java架构师必看对观点赞同或支持。如需转载，请注明文章来源。
本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
java