读书人

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

发布时间: 2012-01-19 00:22:27 作者: rapoo

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一下

读书人网 >Java Web开发

热点推荐