用VML实现的统计饼图代码

最新推荐文章于 2025-12-11 08:58:14 发布

原创最新推荐文章于 2025-12-11 08:58:14 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #stylesheet #path #class #html

WEB开发示例代码专栏收录该内容

4 篇文章

订阅专栏

<!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>
    优快云上的网友 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>