站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题VML实现的饼图(JavaScript类封装)

VML实现的饼图(JavaScript类封装)

摘要: VML实现的饼图(JavaScript类封装)


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

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


<script> function RunVML(){ var vmlSource=vmlData.value; var oWin=window.open("about:blank","_blank","height=400,width=600,status=yes,toolbar=no,menubar=no,location=no,resizable=yes"); var oDoc=oWin.document; oDoc.open(); oDoc.write(vmlSource); oDoc.close(); oWin.focus(); } </script> <textarea id=vmlData style="WIDTH: 100%; HEIGHT: 300px"> <head> <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=' '; //formatStyle+=' <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> </textarea> 欢迎大家给我多提意见,包括程序功能的扩充,bug报告,等到将整个类实现的差不多的时候,我会写一篇文章详细说明图表的制作,另外也可以考虑封装成HTC或写一个xsl。

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 称三次从12球中找出唯一但不知轻重的球
后一篇: 搜索gb2312汉字在网上的频率