?? step313.html
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<script language="JavaScript">
function changeit()
{
banana.value=100-(parseInt(apple.value)+parseInt(pear.value));
showPie();
}
var r=2000;
function createPie(sa,ea,color,n)
{
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='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='black' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
//var newPie=document.createElement("<v:shape style='position:absolute;z-index:8;left:"+px+";top:"+py+";width:"+2*r+";height:"+2*r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='"+color+"' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
pie.insertBefore(newPie);
}
function showPie()
{
pie.innerHTML="";
createPie(0,parseInt(banana.value)*3.6,"blue","香蕉");
createPie(parseInt(banana.value)*3.6,parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,"red","蘋果");
createPie(parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,360,"green","梨");
}
</script>
<body onload="changeit()">
<table align="center">
<tr>
<td align="center" class="title"><strong>數據圖表</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
<strong>餅圖(Pie)</strong>：Pie圖在 VML 是個比較頭痛的問題,可能是我的數學不太好的緣故吧!因為 VML 沒有提供直接的 Pie (扇形) 語句,現在要畫餅圖的話只能自己計算坐標了,這要用到一些三角函數的知識。
還要注意的是，JavaScript 的三角函都是以弧度為單位。所以，要把角度轉換成弧度。<br>
<font color=red>蘋果</font>：
<select id="apple" onchange="changeit()">
<option value="10">10%
<option value="20">20%
<option value="30">30%
<option value="40">40%
<option value="50">50%
</select>
<font color="green">梨</font>：
<select id="pear" onchange="changeit()">
<option value="5">5%
<option value="10">10%
<option value="20">20%
<option value="30">30%
<option value="40">40%
</select>
<font color="blue">香蕉</font>：<input id="banana" type="text" readonly size="2" value="85">%<br><br>
<center>
<v:group ID="group1" CoordOrig="-3000,-2000" CoordSize="6000,4000" style="width:300;height:200;position:relative">
<v:rect style="position:relative;left:-3000;top:-3000;WIDTH:6000;HEIGHT:6000;" fillcolor="white" strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
</v:rect>
<div id="pie"></div>
</v:group>
</center><br>
在寫這個教程的之前，我還沒有親自畫過 Pie 圖，以為很簡單，一步就可以完成，不過當我真的去畫的時候，讓我差點一個晚上沒有睡覺(目瞪口呆，口水直流)。<br>
我先研究 <a href="http://www.w3.org/TR/NOTE-VML" target="_blank">http://www.w3.org/TR/NOTE-VML</a> 里面有寫關于 path 里面的 ae (AngleEllipseTo) 命令(MSDN里面都沒有關于這些命令，3w 全部命令都有)。那個命令確實可以很簡單的完成，但它有 6 個參數，最后兩個參賽很難理解。因為
在一些例子中，這兩個數非常大，五六位之多。不得其解，不得不放棄這個命令(一個晚上過去了)。<br><br>
CSDN上的網友 emu(ston) 提出的問題，還有他最后完成的 Pie 圖，給我了一些啟發，他的做法是用 PolyLine 畫曲線，這樣的方法確實可行，不過如果精度太底，曲線就不平滑了。我發現 path 里面的 ar 命令就是用來畫弧線的。問題終于解決了。
現在講講 ar 命令的使用。<br>
<strong>ar</strong> left,top,right,bottom start(x,y) end(x,y) 共六個參數。前面四個參數分別是整圓的左上角和右下角坐標。這樣就確定了弧的范圍。后面兩個參數是弧的開始坐標和結束坐標。在知道角度和半徑的時候，最后兩個參數是很好求的。
下面的代碼可以畫一個扇形，sa,ea,用來確定起始角度和結束角度，注意，這里用角度，在函數里面我再把角度換算成弧度的。color 是顏色， n 是一些提示信息：<br><br>
<div class="memo">
var r=2000; //半徑<br>
function createPie(sa,ea,color,n)<br>
{<br>
var fs=Math.PI*2*(sa/360); //角度轉換成弧度<br>
var fe=Math.PI*2*(ea/360);<br>
var sx=parseInt(r*Math.sin(fs));<br>
var sy=parseInt(-r*Math.cos(fs)); //注意這里有個負號，因為VML的坐標第四像限相當于數學中的第一像限<br>
var ex=parseInt(r*Math.sin(fe));<br>
var ey=parseInt(-r*Math.cos(fe));<br>
var strPie="<v:shape title='"+<strong>n</strong>+"' style='position:absolute;z-index:8;width:"+2*<strong>r</strong>+";height:"+2*<strong>r</strong>+"'"<br>
+" CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+<strong>color</strong>+"'"<br>
+"path='m0,0 l "+<strong>sx</strong>+","+<strong>sy</strong>+" <font color=red>ar -2000,-2000,2000,2000,"+<strong>ex</strong>+","+<strong>ey</strong>+","+<strong>sx</strong>+","+<strong>sy</strong>+"</font> l0,0 x e' />";<br>
var newPie=document.createElement(strPie);<br>
group1.insertBefore(newPie);<br>
}<br>
</div><br>
數據圖表到這里就介紹完了，可能還有其他形式的圖表，不過有了前面三個例子，其他的我相信大家都能知道該怎么做的。接下來的一節將介紹 VML 一個應用廣泛的 矢量地圖。
<p align="right">第 <a href="step31.html">1</a> <a href="step312.html">2</a> <strong style="color:red">3</strong> 頁</p>
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目錄</a><br>
上一節:<a href="step23.html">給VML增加事件</a><br>
下一節:<a href="step32.html">矢量地圖</a>
</td>
</tr>
</table>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -