首頁 > 開發者 > JavaScript

VML實現的餅圖（JavaScript類封裝）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

代碼如下：


<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><br /> <head><br /> <title>VML實現的餅圖（JavaScript類封裝）</title><br /> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"><br /> <meta name="ProgId" content="VisualStudio.HTML"><br /> <meta name="Originator" content="Microsoft Visual Studio .NET 7.1"><br /> <STYLE>v\:* { BEHAVIOR: url(#default#VML) }<br /> o\:* { BEHAVIOR: url(#default#VML) }<br /> .shape { BEHAVIOR: url(#default#VML) }<br /> </STYLE><br /> <script language="javascript"><br />function Add(){<br /> var shape=document.createElement("v:shape");<br /> shape.type="#tooltipshape";<br /> shape.style.width="150px";<br /> shape.style.height="150px";<br /> shape.coordsize="21600,21600";<br /> shape.fillcolor="infobackground";</p><p> var textbox=document.createElement("v:textbox");<br /> textbox.style.border="1px solid red";<br /> textbox.style.innerHTML="測試";<br /> shape.appendChild(textbox); </p><p> document.body.appendChild(shape);<br />}</p><p>function VMLPie(pContainer,pWidth,pHeight,pCaption){<br /> this.Container=pContainer;<br /> this.Width= pWidth || "400px";<br /> this.Height=pHeight || "250px";<br /> this.Caption = pCaption || "VML Chart";<br /> this.backgroundColor="";<br /> this.Shadow=false;<br /> this.BorderWidth=0;<br /> this.BorderColor=null;<br /> this.all=new Array();<br /> this.RandColor=function(){</p><p> return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";<br /> }<br /> this.VMLObject=null;<br />}</p><p>VMLPie.prototype.Draw=function(){<br /> //畫外框<br /> var o=document.createElement("v:group");<br /> o.style.width=this.Width;<br /> o.style.height=this.Height;<br /> o.coordsize="21600,21600";<br /> //添加一個背景層<br /> var vRect=document.createElement("v:rect");<br /> vRect.style.width="21600px"<br /> vRect.style.height="21600px"<br /> o.appendChild(vRect);</p><p> var vCaption=document.createElement("v:textbox");<br /> vCaption.style.fontSize="24px";<br /> vCaption.style.height="24px"<br /> vCaption.style.fontWeight="bold";<br /> vCaption.innerHTML=this.Caption;<br /> vCaption.style.textAlign="center";</p><p> vRect.appendChild(vCaption);<br /> //設定邊框大小<br /> if(this.BorderWidth){<br /> vRect.strokeweight=this.BorderWidth;<br /> }<br /> //設定邊框顏色<br /> if(this.BorderColor){<br /> vRect.strokecolor=this.BorderColor;<br /> }<br /> //設定背景顏色<br /> if(this.backgroundColor){<br /> vRect.fillcolor=this.backgroundColor;<br /> }<br /> //設定是否出現陰影<br /> if(this.Shadow){<br /> var vShadow=document.createElement("v:shadow");<br /> vShadow.on="t";<br /> vShadow.type="single";<br /> vShadow.color="graytext";<br /> vShadow.offset="4px,4px";<br /> vRect.appendChild(vShadow);<br /> }<br /> this.VMLObject=o;<br /> this.Container.appendChild(o);</p><p> //開始畫內部園<br /> var oOval=document.createElement("v:oval");<br /> oOval.style.width="15000px";<br /> oOval.style.height="14000px";<br /> oOval.style.top="4000px";<br /> oOval.style.left="1000px";<br /> oOval.fillcolor="#d5dbfb";</p><p> //本來計劃加入3D的效果，後來感覺確實不好控制，就懶得動手了<br /> //var o3D=document.createElement("o:extrusion");<br /> var formatStyle=' <v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';<br /> //formatStyle+='<o:extrusion v:ext="view" color="#9cf" on="t" rotationangle="-15"';<br /> //formatStyle+=' viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="105"';<br /> //formatStyle+=' lightposition="0,50000" lightposition2="0,-50000"/>';<br /> 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"/>';<br /> oOval.innerHTML=formatStyle; </p><p> o.appendChild(oOval);<br /> this.CreatePie(o); </p><p>}<br />VMLPie.prototype.CreatePie=function(vGroup){<br /> var mX=Math.pow(2,16) * 360;<br /> //這個參數是劃圖形的關鍵<br /> //AE x y width height startangle endangle<br /> //x y表示圓心位置<br /> //width height形狀的大小<br /> //startangle endangle的計算方法如下<br /> // 2^16 * 度數 </p><p> var vTotal=0;<br /> var startAngle=0;<br /> var endAngle=0;<br /> var pieAngle=0;<br /> var prePieAngle=0;</p><p> var objRow=null;<br /> var objCell=null;</p><p> for(i=0;i<this.all.length;i++){<br /> vTotal+=this.all[i].Value;<br /> }</p><p> var objLegendRect=document.createElement("v:rect");</p><p> var objLegendTable=document.createElement("table");<br /> objLegendTable.cellPadding=0;<br /> objLegendTable.cellSpacing=3;<br /> objLegendTable.width="100%";<br /> with(objLegendRect){<br /> style.left="17000px";<br /> style.top="4000px";<br /> style.width="4000px";<br /> style.height="12000px";<br /> fillcolor="#e6e6e6";<br /> strokeweight="1px";<br /> }<br /> objRow=objLegendTable.insertRow();<br /> objCell=objRow.insertCell();<br /> objCell.colSpan="2";<br /> //objCell.style.border="1px outset";<br /> objCell.style.backgroundColor="black";<br /> objCell.style.padding="5px";<br /> objCell.style.color="window";<br /> objCell.style.font="caption";<br /> objCell.innerText="總數:"+vTotal;</p><p> var vTextbox=document.createElement("v:textbox");<br /> vTextbox.appendChild(objLegendTable);<br /> objLegendRect.appendChild(vTextbox);</p><p> var vShadow=document.createElement("v:shadow");<br /> vShadow.on="t";<br /> vShadow.type="single";<br /> vShadow.color="graytext";<br /> vShadow.offset="2px,2px";<br /> objLegendRect.appendChild(vShadow);</p><p> vGroup.appendChild(objLegendRect); </p><p> var strAngle="";<br /> for(i=0;i<this.all.length;i++){ //順序的划出各個餅圖<br /> var vPieEl=document.createElement("v:shape");<br /> var vPieId=document.uniqueID;<br /> vPieEl.style.width="15000px";<br /> vPieEl.style.height="14000px";<br /> vPieEl.style.top="4000px";<br /> vPieEl.style.left="1000px";<br /> vPieEl.coordsize="1500,1400";<br /> vPieEl.strokecolor="white";<br /> vPieEl.id=vPieId;</p><p> pieAngle= this.all[i].Value / vTotal;<br /> startAngle+=prePieAngle;<br /> prePieAngle=pieAngle;<br /> endAngle=pieAngle; </p><p> //strAngle+=this.all[i].Name +":" +this.all[i].Value+ " Start:"+startAngle +" End:"+ endAngle +"\n";</p><p> vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";<br /> vPieEl.title=this.all[i].Name +"\n所佔比例:"+ endAngle * 100 +"%\n詳細描述:" +this.all[i].TooltipText;</p><p> //vPieEl.innerHTML='<v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';<br /> var objFill=document.createElement("v:fill");<br /> objFill.rotate="t";<br /> objFill.focus="100%";<br /> objFill.type="gradient";<br /> objFill.angle=parseInt( 360 * (startAngle + endAngle /2));<br /> vPieEl.appendChild(objFill);</p><p> var objTextbox=document.createElement("v:textbox");<br /> objTextbox.border="1px solid black";<br /> objTextbox.innerHTML=this.all[i].Name +":" + this.all[i].Value;<br /> //vPieEl.appendChild(objTextbox);</p><p> var vColor=this.RandColor();<br /> vPieEl.fillcolor=vColor; //設定顏色<br /> //開始畫圖例<br /> objRow=objLegendTable.insertRow();<br /> objRow.style.height="16px";</p><p> var objColor=objRow.insertCell();//顏色標記<br /> objColor.style.backgroundColor=vColor;<br /> objColor.style.width="16px";</p><p> objColor.PieElement=vPieId;<br /> objColor.attachEvent("onmouseover",LegendMouseOverEvent);<br /> objColor.attachEvent("onmouseout",LegendMouseOutEvent);<br /> //objColor.onmouseover="LegendMouseOverEvent()";<br /> //objColor.onmouseout="LegendMouseOutEvent()";</p><p> objCell=objRow.insertCell();<br /> objCell.style.font="icon";<br /> objCell.style.padding="3px";<br /> objCell.innerText=this.all[i].Name +":"+this.all[i].Value ;</p><p> vGroup.appendChild(vPieEl);<br /> }</p><p>}<br />VMLPie.prototype.Refresh=function(){</p><p>}<br />VMLPie.prototype.Zoom=function (iValue){<br /> var vX=21600;<br /> var vY=21600;<br /> this.VMLObject.coordsize=parseInt(vX / iValue) +","+parseInt(vY /iValue);<br />}<br />VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){</p><p> var oData=new Object();<br /> oData.Name=sName;<br /> oData.Value=sValue;<br /> oData.TooltipText=sTooltipText;<br /> var iCount=this.all.length;<br /> this.all[iCount]=oData;</p><p>}<br />VMLPie.prototype.Clear=function(){<br /> this.all.length=0;<br />}<br />function LegendMouseOverEvent(){</p><p> var eSrc=window.event.srcElement;<br /> eSrc.border="1px solid black";<br />}<br />function LegendMouseOutEvent(){<br /> var eSrc=window.event.srcElement;<br /> eSrc.border="";<br />}</p><p>var objPie=null;<br />//以下是函數調用<br />function DrawPie(){<br /> objPie=new VMLPie(document.body,"600px","450px","人口統計圖");<br /> //objPie.BorderWidth=3;<br /> //objPie.BorderColor="blue";<br /> //objPie.Width="800px";<br /> //objPie.Height="600px";<br /> objPie.backgroundColor="#ffffff";<br /> objPie.Shadow=true;</p><p> objPie.AddData("北京",10,"北京的人口");<br /> objPie.AddData("上海",52,"上海的固定人口");<br /> objPie.AddData("天津",30,"天津的外地人口");<br /> objPie.AddData("西安",58,"西安城市人口");<br /> objPie.AddData("武漢",30,"武漢的外地人口");<br /> objPie.AddData("重慶",58,"重慶城市人口");<br /> objPie.Draw();<br /> //alert(document.body.outerHTML);<br />}</p><p> </script><br /> </head><br /> <body onload="DrawPie()"><br /> <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"<br /> adj="1350,25920"><br /> <v:formulas><br /> <v:f eqn="sum #0 0 10800 "></v:f><br /> <v:f eqn="sum #1 0 10800 "></v:f><br /> <v:f eqn="cosatan2 10800 @0 @1 "></v:f><br /> <v:f eqn="sinatan2 10800 @0 @1 "></v:f><br /> <v:f eqn="sum @2 10800 0 "></v:f><br /> <v:f eqn="sum @3 10800 0 "></v:f><br /> <v:f eqn="sum @4 0 #0 "></v:f><br /> <v:f eqn="sum @5 0 #1 "></v:f><br /> <v:f eqn="mod @6 @7 0 "></v:f><br /> <v:f eqn="prod 600 11 1 "></v:f><br /> <v:f eqn="sum @8 0 @9 "></v:f><br /> <v:f eqn="prod @10 1 3 "></v:f><br /> <v:f eqn="prod 600 3 1 "></v:f><br /> <v:f eqn="sum @11 @12 0 "></v:f><br /> <v:f eqn="prod @13 @6 @8 "></v:f><br /> <v:f eqn="prod @13 @7 @8 "></v:f><br /> <v:f eqn="sum @14 #0 0 "></v:f><br /> <v:f eqn="sum @15 #1 0 "></v:f><br /> <v:f eqn="prod 600 8 1 "></v:f><br /> <v:f eqn="prod @11 2 1 "></v:f><br /> <v:f eqn="sum @18 @19 0 "></v:f><br /> <v:f eqn="prod @20 @6 @8 "></v:f><br /> <v:f eqn="prod @20 @7 @8 "></v:f><br /> <v:f eqn="sum @21 #0 0 "></v:f><br /> <v:f eqn="sum @22 #1 0 "></v:f><br /> <v:f eqn="prod 600 2 1 "></v:f><br /> <v:f eqn="sum #0 600 0 "></v:f><br /> <v:f eqn="sum #0 0 600 "></v:f><br /> <v:f eqn="sum #1 600 0 "></v:f><br /> <v:f eqn="sum #1 0 600 "></v:f><br /> <v:f eqn="sum @16 @25 0 "></v:f><br /> <v:f eqn="sum @16 0 @25 "></v:f><br /> <v:f eqn="sum @17 @25 0 "></v:f><br /> <v:f eqn="sum @17 0 @25 "></v:f><br /> <v:f eqn="sum @23 @12 0 "></v:f><br /> <v:f eqn="sum @23 0 @12 "></v:f><br /> <v:f eqn="sum @24 @12 0 "></v:f><br /> <v:f eqn="sum @24 0 @12 "></v:f><br /> <v:f eqn="sum #0 0 0 "></v:f><br /> <v:f eqn="sum #1 0 0 "></v:f><br /> </v:formulas><br /> <v:path o:connectlocs="67,10800;10800,21577;21582,10800;10800,1235;@38,@39" o:extrusionok="f"<br /> o:connecttype="custom" textboxrect="2977,3262,17087,17337"></v:path><br /> <v:handles><br /> <v:h position="#0,#1"></v:h><br /> </v:handles><br /> <o:complex v:ext="view"></o:complex><br /> </v:shapetype><br /> <select id="zoom" onchange="objPie.Zoom(this.value)"><br /> <option value ="0.2" selected=true>20%</option><br /> <option value ="0.25">25%</option><br /> <option value ="0.4">40%</option><br /> <option value ="0.5">50%</option><br /> <option value ="0.75">75%</option><br /> <option value ="0.8">80%</option><br /> <option value ="1">原始大小</option><br /> <option value ="1.25">125%</option><br /> <option value ="1.5">150%</option><br /> <option value ="2">200%</option><br /> <option value ="3">300%</option><br /> <option value ="4">400%</option><br /> </select><br /> </body><br /></html>
[Ctrl+A 全選 提示:你可先修改部分代碼,再點運行代碼]

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes javascript bindto
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More