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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > VML实现的饼图（JavaScript类封装）

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 408 ::

收藏到网摘: n/a

称三次从12球中找出唯一但不知轻重的球搜索gb2312汉字在网上的频率

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

将一下代码粘贴到一个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.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> <body onload="DrawPie()"> <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 id="zoom" onchange="objPie.Zoom(this.value)"> <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>

欢迎大家给我多提意见，包括程序功能的扩充，bug报告，等到将整个类实现的差不多的时候，我会写一篇文章详细说明图表的制作，另外也可以考虑封装成HTC或写一个xsl。

称三次从12球中找出唯一但不知轻重的球搜索gb2312汉字在网上的频率

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

评论 (0) All