中文XML论坛--问一个关于VML饼图的问题！！急求啊~拜托了~！

我饼图可以画出来了，但我要点击一个按纽把饼图给隐藏掉
请问该怎么做。。。或者想把饼图放到一个DIV里可以吗？
我试过把比率缩小到0，但还是会有字残留
下面是代码

<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 VMLPie(pContainer,pWidth,pHeight,pCaption){
this.Container=pContainer;//容器
this.Width= pWidth;//宽
this.Height=pHeight;//高
this.Caption = pCaption;//标题
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";//矩形宽--相对于o
   vRect.style.height="21600px";//矩形高--相对于o
   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 formatStyle=' <v:fill   rotate="t" angle="-135" focus="100%" type="gradient"/>';
   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.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;



    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;

    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);

    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.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()">
   <select id="zoom" onchange="objPie.Zoom(this.value)">
    <option value ="0" selected=true>0%</option>
    <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>


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	101.563ms