开发学院网页设计 JavaScript VML实现的饼图（javascript类封装）阅读

VML实现的饼图（javascript类封装）

　2007-11-27 16:11:39　来源：WEB开发网　閵嗭拷

核心提示：心血来潮编写的一个东西,还没有完全写完,但是基本的功能已经实现将一下代码粘贴到一个htm文件保存之后就可以查看效果察看运行结果 <html xml(标准化越来越近了)ns:v=urn:schemas-microsoft-com:vml xml(标准化越来越近了)ns:o=urn:schemas-microsoft

心血来潮编写的一个东西,还没有完全写完,但是基本的功能已经实现

将一下代码粘贴到一个htm文件保存之后就可以查看效果

<html xml(标准化越来越近了)ns:v=urn:schemas-microsoft-com:vml xml(标准化越来越近了)ns: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.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){ 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 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 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 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>原始大小</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>

欢迎大家给我多提意见，包括程序功能的扩充，bug报告，等到将整个类实现的差不多的时候，我会写一篇文章详细说明图表的制作，另外也可以考虑封装成HTC或写一个xsl。