<!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 οnlοad="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" οnchange="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" οnchange="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>