VML实现的饼图（JavaScript类封装）[1]|中文方案文档站(提供各类方案下载,WORD文档下载,范文,案例等)

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

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

<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.s</p>
			  <div class="clear-both"></div>
			</div>
			
<div class="pages"><a href=20050818223402292.htm target="_self" >首页</a> 
<a href=20050818223402292_2.htm target="_self">下页</a> 
<a href=20050818223402292_2.htm target="_self">尾页</a> 
<a href=20050818223402292.htm target="_self"><strong>[1]</strong></a> 
<a href=20050818223402292_2.htm target="_self">[2]</a> 
</div>
			<div class="keywords">
			  <strong>本文关键：</strong>VML JavaScript OOP 图表
			</div>	
			  <div class="ad_doc_ad_2">			  			  
				<script type="text/javascript">
				</script>
				<script type="text/javascript"
				  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>			  
			  </div>					
		    <div class="clear-both"></div>
		  </div>
		</div>

<div id="content_right">
			  <div class="cbox" id="relate_doc"> 
				<div class="darkboxTitle"><span>　　相关方案</span></div> 
				<div class="ad_site_index_right_1">
					
					<form method="get" action="http://www.google.cn/custom" target="google_window">
					<table border="0" bgcolor="#ffffff">
					<tr><td nowrap="nowrap" valign="top" align="left" height="32">
					<a href="http://www.google.com/">
					<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
					<br/>
					<input type="hidden" name="domains" value="www.cn-doc.com"></input>
					<label for="sbi" style="display: none">输入您的搜索字词</label>
					<input type="text" name="q" size="15" maxlength="255" value="" id="sbi"></input>
					<label for="sbb" style="display: none">提交搜索表单</label>
					<input type="submit" name="sa" value="搜索" id="sbb"></input>
					</td></tr>
					<tr>
					<td nowrap="nowrap">
					<table>
					<tr>
					<td>
					<input type="radio" name="sitesearch" value="" id="ss0"></input>
					<label for="ss0" title="搜索网络"><font size="-1" color="#000000">Web</font></label></td>
					<td>
					<input type="radio" name="sitesearch" value="www.cn-doc.com" checked id="ss1"></input>
					<label for="ss1" title="搜索 www.cn-doc.com"><font size="-1" color="#000000">www.cn-doc.com</font></label></td>
					</tr>
					</table>
					<input type="hidden" name="client" value="pub-1022332794981269"></input>
					<input type="hidden" name="forid" value="1"></input>
					<input type="hidden" name="channel" value="9722277709"></input>
					<input type="hidden" name="ie" value="GB2312"></input>
					<input type="hidden" name="oe" value="GB2312"></input>
					<input type="hidden" name="flav" value="0000"></input>
					<input type="hidden" name="sig" value="Dl1iwOxBnXTtaDIa"></input>
					<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:50;LW:200;L:http://www.cn-doc.com/images/forgoogle.gif;S:http://www.cn-doc.com;FORID:1"></input>
					<input type="hidden" name="hl" value="zh-CN"></input>
					</td></tr></table>
					</form>
					
				</div>
				<ul class="darklist">
				  <li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223402236.htm" title="IE5中用JavaScript跨frame加option问题" target="_blank">IE5中用JavaScript</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223402269.htm" title="javascript手冊-a" target="_blank">javascript手冊-a</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223403250.htm" title="[教程]JScript中的变量引用规则（一）" target="_blank">[教程]JScript中的变量</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223403641.htm" title="可输入的select" target="_blank">可输入的select</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223403277.htm" title="JavaScript窗口功能指南之打开一个新窗口" target="_blank">JavaScript窗口功能指</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223403201.htm" title="类似 MSDN CSDN 左边导航树效果的实现! [JavaScript + ASP]" target="_blank">类似 MSDN CSDN 左边</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/2005081822340327.htm" title="实现上传（增删）多个文件的客户端写法。" target="_blank">实现上传（增删）多个文件的客户</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223403525.htm" title="IE6.0打印机制解析" target="_blank">IE6.0打印机制解析</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223403828.htm" title="JavaScript 是什麽？" target="_blank">JavaScript 是什麽？</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223403646.htm" title="用Javascript写的一个映射表(MAP)类－－续" target="_blank">用Javascript写的一个</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223402249.htm" title="JavaScript构造XML树结构" target="_blank">JavaScript构造XML</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/200508182234028.htm" title="IE中非模式对话框(showModelessDialog)应用" target="_blank">IE中非模式对话框(showM</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/2005081822340299.htm" title="SelectBox in Frame" target="_blank">SelectBox in Fr</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223402313.htm" title="JavaScript窗口功能指南之创建弹出窗口" target="_blank">JavaScript窗口功能指</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223402445.htm" title="关于在页面中解决打印的几个问题" target="_blank">关于在页面中解决打印的几个问题</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223401705.htm" title="TreeView（扩充XMLSelTree）（一）" target="_blank">TreeView（扩充XMLS</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223401572.htm" title="事件驱动的JScript面对象编程（例）" target="_blank">事件驱动的JScript面对象</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223401716.htm" title="JavaScript修改注册表" target="_blank">JavaScript修改注册表</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/2005081822340088.htm" title="一个通用的动态加载数据例子（IE5，NS6，Mozilla 1.3b）" target="_blank">一个通用的动态加载数据例子（I</a>…</li><li><a href="../../_soft_javascript_tech_doc/2005_08_18_22/20050818223400588.htm" title="javascript/Jscript实现父子窗体的互相引用问题(Powered By ZosaTapo)" target="_blank">javascript/Jscr</a>…</li>				  	  
				</ul> 
				<div class="ad_site_index_right_2">
					<script type="text/javascript">
					</script>
					<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
					</script>				
				</div>
			  </div>			 
	    </div>

<div class="clear-both"> </div> 
	   <div id="ContentBottom" class="darkBox">
	     <p>本站最佳浏览方式为 分辨率 1024x768 IE 6.0（或更高版本的 IE浏览器）</p><a href="#"><img src="../../images/btn_top.gif" width="51" height="11" alt="go top"/></a>
	   </div> 
   </div>

</div>
<script type="text/javascript" language="javascript" src="../../comm/doc/w3c_99_bottom.js"></script>
<script type="text/javascript" language="javascript" src="../../comm/clicksum_doc.asp?typeid=46&infoid=390173"></script>
<script type="text/javascript" language="JavaScript" src="../../comm/statistics.js"></script>
</body>
</html>

VML实现的饼图（JavaScript类封装）[1]

[入库：2005年8月18日] [更新：2007年3月24日]