首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > Java Web开发 >

js中用vml在圆中画扇形的有关问题

2012-01-19 
js中用vml在圆中画扇形的问题!大家好,我有个用js中的vml画圆图的问题。页面上就是显示不出来圆图形。各位指

js中用vml在圆中画扇形的问题!
大家好,我有个用js中的vml画圆图的问题。页面上就是显示不出来圆图形。各位指点下啊,页面代码如下。我需要在js代码里面生成div层,然后在div层里面显示这个圆图形。因为画圆图形的一些数据是从后台传过来的!

这个很着急啊!最后40分啦,大家帮帮忙啊!谢谢啦!

 代码如下:大家帮帮看看啊,谢谢啦!

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > 
<html xmlns:v > 
  <head > 
  <title >VML Pie </title > 
<STYLE > 
v\:* { BEHAVIOR: url(#default#VML) } 
</STYLE > 
<script type="text/javascript" > 

  var r=200; 
  function showDiv(){ 
  var i=50; 
  var m=10; 
  var n=10; 
  var insertTD=document.getElementById("insertTD"); 
   
  for(var j=0;j <2;j++){ 
  //add object div  
  var divv=document.createElement("div"); 
  divv.setAttribute("id","div"+j);  
  divv.style.zIndex=j; 
  divv.style.display="block"; 
  divv.style.left=200+i; 
  divv.style.top=120+i;  
  divv.setAttribute( 'border ', 'solid ');  
  divv.setAttribute( 'border-width ', 'thin thin thin thin '); 
  divv.setAttribute( 'border-color ', '#000000 black black #000000 ');  
  divv.setAttribute( 'position ', 'absolute '); 
  insertTD.appendChild(divv); 
  //add vml <v:group > 
  var group=document.createElement( 'v:group '); 
  group.setAttribute("id","group"+j); 
  group.setAttribute( 'CoordOrig ', '-300,-200 '); 
  group.setAttribute( 'CoordSize ', '600,400 '); 
  group.setAttribute( 'position ', 'relative '); 
  group.setAttribute( 'height ', '500 '); 
  group.setAttribute( 'width ', '500 '); 
  var rect=document.createElement( 'v:rect '); 
  rect.style.fillcolor= 'white '; 
  rect.style.strokecolor= 'red '; 
  rect.style.position= 'relative '; 
  rect.style.offsetLeft= '-300 '; 
  rect.style.top= '-300 '; 
  rect.style.width= '600 '; 
  rect.style.height= '600 '; 
   
  /*** rect.setAttribute( 'fillcolor ',); 
  rect.setAttribute( 'strokecolor ', 'red '); 
  rect.setAttribute( 'position ', 'relative '); 
  rect.setAttribute( 'left ', '-300 '); 
  rect.setAttribute( 'top ', '-300 '); 
  rect.setAttribute( 'WIDTH ', '600 '); 
  rect.setAttribute( 'HEIGHT ', '600 '); 
  */  
   
  var shadow=document.createElement( 'v:shadow '); 
  shadow.setAttribute( 'type ', 'single '); 
  shadow.setAttribute( 'color ', 'silver '); 
  shadow.setAttribute( 'offset ', '4pt,3pt ');  
  rect.appendChild(shadow); 
  group.appendChild(rect);  
  var shapediv=document.createElement( 'div '); 
  shapediv.setAttribute("id","shapediv"+j);  
  showPie( '40 ', '30 ',shapediv);  


   
  ///showPie(m,n);  
   
  i+=50;  
  m+=5; 
  n+=5;  
  }  
  }  
function createPie(sa,ea,color,n,divObject) 

  var fs=Math.PI*2*(sa/360); 
  var fe=Math.PI*2*(ea/360); 
  var sx=parseInt(r*Math.sin(fs)); 
  var sy=parseInt(-r*Math.cos(fs)); 
  var ex=parseInt(r*Math.sin(fe)); 
  var ey=parseInt(-r*Math.cos(fe)); 
  var newPie=document.createElement(" <v:shape title= '"+n+" ' style= 'position:absolute;z-index:8;width:"+2*r+";height:"+2*r+" ' CoordSize= '400,400 ' strokeweight= '1pt ' fillcolor= '"+color+" ' strokecolor= 'black ' path= 'm0,0 l "+sx+","+sy+" ar -200,-200,200,200,"+ex+","+ey+","+sx+","+sy+" l0,0 x e ' / >");  
  divObject.insertBefore(newPie); 
  return newPie; 


function showPie(oneValue,threeValue,divObject) 

  createPie(0,parseInt(threeValue)*3.6,"#0000FF","Three",divObject); 
  createPie(parseInt(threeValue)*3.6,parseInt(threeValue)*3.6+parseInt(oneValue)*3.6,"#FF0000","One",divObject); 
  createPie(parseInt(threeValue)*3.6+parseInt(oneValue)*3.6,360,"#00FF00","Two",divObject); 


function closePercentDiv(){ 
showPie(40,40);  
showPie(60,20); 

</script > 
<style type="text/css" > 

div{ 
position:absolute; 
width:462px; 
height:256px; 
background-color:#CCCCCC; 
border: solid; border-width: thin thin thin thin; border-color: #000000 black black #000000; 


v:group{ 
  width:300; 
  height:200; 
  position:relative 


v:rect{ 
 position:relative; 
 left:-300; 
 top:-300; 
 WIDTH:600; 
 HEIGHT:600; 
 bgcolor:red; 

</style > 
</head > 
  <body bgcolor="" > 
  <table > 
  <tr >  
  <td id= 'insertTD ' > </td > 
  </tr > 
  </table >  
  <script type="text/javascript" > 
  showDiv(); 
  </script >  
  </body >  
</html > 


[解决办法]
帮你UP一下

热点排行