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

代码如下：

<head>

<title>VML实现的饼图（JavaScript类封装）</title>

<STYLE>v\:* { BEHAVIOR: url(#default#VML) }

o\:* { BEHAVIOR: url(#default#VML) }

.shape { BEHAVIOR: url(#default#VML) }

</STYLE>

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.style.border="1px outset";

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;

//strAngle+=this.all[i].Name +":" +this.all[i].Value+ " Start:"+startAngle +" End:"+ endAngle +"\n";

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;

//vPieEl.innerHTML='<v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';

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

//objColor.onmouseover="LegendMouseOverEvent()";

//objColor.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.BorderWidth=3;

//objPie.BorderColor="blue";

//objPie.Width="800px";

//objPie.Height="600px";

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>

<v:shapetype id="tooltipshape" coordsize="21600,21600" o:spt="106" path=" ar0,7165,4345,13110,1950,7185,1080,12690 at475,11732,4835,17650,1080,12690,2910,17640 at2387,9757,10107,20300,2910,17640,8235,19545 at7660,12382,14412,21597,8235,19545,14280,18330 at12910,11080,18695,18947,14280,18330,18690,15045 at14822,5862,21597,15082,18690,15045,20895,7665 at15772,2592,21105,9865,20895,7665,19140,2715 at14330,0,19187,6595,19140,2715,14910,1170 at10992,0,15357,5945,14910,1170,11250,1665 at6692,650,12025,7917,11250,1665,7005,2580 at1912,1972,8665,11162,7005,2580,1950,7185 x e ar0,7165,4345,13110,1080,12690,2340,13080 nf e ar475,11732,4835,17650,2910,17640,3465,17445 nf e ar7660,12382,14412,21597,7905,18675,8235,19545 nf e ar7660,12382,14412,21597,14280,18330,14400,17370 nf e ar12910,11080,18695,18947,18690,15045,17070,11475 nf e ar15772,2592,21105,9865,20175,9015,20895,7665 nf e ar14330,0,19187,6595,19200,3345,19140,2715 nf e ar14330,0,19187,6595,14910,1170,14550,1980 nf e ar10992,0,15357,5945,11250,1665,11040,2340 nf e ar1912,1972,8665,11162,7650,3270,7005,2580 nf e ar1912,1972,8665,11162,1950,7185,2070,7890 nf e m@23@37 qx@35@24@23@36@34@24@23@37 x e m@16@33 qx@31@17@16@32@30@17@16@33 x e m@38@29 qx@27@39@38@28@26@39@38@29 x e"

adj="1350,25920">

<v:formulas>

<v:f eqn="sum #0 0 10800 "></v:f>

<v:f eqn="sum #1 0 10800 "></v:f>

<v:f eqn="cosatan2 10800 @0 @1 "></v:f>

<v:f eqn="sinatan2 10800 @0 @1 "></v:f>

<v:f eqn="sum @2 10800 0 "></v:f>

<v:f eqn="sum @3 10800 0 "></v:f>

<v:f eqn="sum @4 0 #0 "></v:f>

<v:f eqn="sum @5 0 #1 "></v:f>

<v:f eqn="mod @6 @7 0 "></v:f>

<v:f eqn="prod 600 11 1 "></v:f>

<v:f eqn="sum @8 0 @9 "></v:f>

<v:f eqn="prod @10 1 3 "></v:f>

<v:f eqn="prod 600 3 1 "></v:f>

<v:f eqn="sum @11 @12 0 "></v:f>

<v:f eqn="prod @13 @6 @8 "></v:f>

<v:f eqn="prod @13 @7 @8 "></v:f>

<v:f eqn="sum @14 #0 0 "></v:f>

<v:f eqn="sum @15 #1 0 "></v:f>

<v:f eqn="prod 600 8 1 "></v:f>

<v:f eqn="prod @11 2 1 "></v:f>

<v:f eqn="sum @18 @19 0 "></v:f>

<v:f eqn="prod @20 @6 @8 "></v:f>

<v:f eqn="prod @20 @7 @8 "></v:f>

<v:f eqn="sum @21 #0 0 "></v:f>

<v:f eqn="sum @22 #1 0 "></v:f>

<v:f eqn="prod 600 2 1 "></v:f>

<v:f eqn="sum #0 600 0 "></v:f>

<v:f eqn="sum #0 0 600 "></v:f>

<v:f eqn="sum #1 600 0 "></v:f>

<v:f eqn="sum #1 0 600 "></v:f>

<v:f eqn="sum @16 @25 0 "></v:f>

<v:f eqn="sum @16 0 @25 "></v:f>

<v:f eqn="sum @17 @25 0 "></v:f>

<v:f eqn="sum @17 0 @25 "></v:f>

<v:f eqn="sum @23 @12 0 "></v:f>

<v:f eqn="sum @23 0 @12 "></v:f>

<v:f eqn="sum @24 @12 0 "></v:f>

<v:f eqn="sum @24 0 @12 "></v:f>

<v:f eqn="sum #0 0 0 "></v:f>

<v:f eqn="sum #1 0 0 "></v:f>

</v:formulas>

<v:path o:connectlocs="67,10800;10800,21577;21582,10800;10800,1235;@38,@39" o:extrusionok="f"

o:connecttype="custom" textboxrect="2977,3262,17087,17337"></v:path>

<v:handles>

<v:h position="#0,#1"></v:h>

</v:handles>

<o:complex v:ext="view"></o:complex>

</v:shapetype>

</select>

</body>

</html>

[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]