第三种街边摊上蛋饼做法 ＳＶＧ，ＶＭＬ，ＦＬＡＳＨ三种实现统计饼图的方式比较

　　摘要：通过实现网上教学平台中教师端对学生在线测试成绩的统计饼图，本文描述了用svg，vml，flash实现动态统计饼图的方法，分析了用SVG＋JavaScript，VML+JavaScript，AS实现动态统计饼图的优缺点。
　　关键词：SVG；VML；AS；JavaScript
　　中图分类号：TP37 文献标识码：A文章编号：1009-3044(2007)18-31721-02
　　Comparison of Three Means(SVG,VML,FLASH) to Realize Pie Chart
　　LI Ming-cui
　　(School of information engineering, East China Jiaotong University,Nanchang 330013,China)
　　Abstract:By completing the statistical pie chart which represents the analyzed result of students’ scores of the online teaching platform ,this document described the technique to realize the dynamic statistical pie chart with three different graphics modes(SVG,VML,FLASH), analyzed the advantages and disadvantages of these three means.
　　Key words:SVG;VML;AS;JavaScript
　　
　　1 引言
　　
　　为了让教师直观的了解学生考试成绩的分布情况，系统采用饼图的方式将统计情况显示出来。饼图共分为5份，分别表示优秀、良好、中等、及格、不及格学生所占比例。每部分用不同颜色标识，当鼠标移动到每部分上时，会出现该部分的提示信息，同时饼图的旁边附有图例。饼图在页面中的显示结果图1所示：
　　图1 教学系统中的饼图效果
　　设计思路：在下拉列表的onchange事件中对页面进行提交，每次重载页面时根据下拉列表中所选择的班级从数据库中获取该班学生的考试成绩数据。根据数据库中学生的成绩，将其分为优秀（90～100）、良好（80～89）、中等（70～79）、及格（60～69）、不及格（0～59）五类。通过查询数据库分别得到各类成绩的学生人数num1,num2,num3,num4,num5。进而可得到取得每一级别成绩的学生数占考试总人数的百分比。如成绩优秀学生所占百分比为：youxiu=num1/(num1+num2+num3+num4+num5),其对应扇型所占角度为youxiu*360。我们将代表“优秀”、“良好”、“中等”、“及格”、“不及格”的扇型所占的角度存于数组angles中，即angles[0]表示“优秀”扇型所占的角度，依次类推。本文将分别讨论svg+javascript、vml+javascript和flash的AS实现该统计饼图的方法。
　　
　　2 svg+javascript实现统计饼图
　　
　　SVG(Scalable Vector Graphics) 是由W3C 组织开发的新一代基于XML 的二维矢量图形标准，主要面向网络应用。它灵活，可扩展，能表现丰富的图形内容，实现了强大的交互性，可重用性和可伸缩性。它描述如下3 种类型的图形对象：矢量图形、位图、文本。图形对象既能被分组，又能被加入样式，变换和组合。SVG文档通常以后缀.svg存放，以文本的形式（XML）存放的。SVG 专门的标记描述的矢量图形有矩形、圆、椭圆、直线、折线和多边形。对于不能用上述图形表示的复杂图形可以用路径来描述。可以对各图形元素施以填充，勾勒边界，使用滤镜，通过XSL（Extensible Stylesheet Language）或CSS（Cascading StyleSheets）的方法添加各种样式等操作。
　　2.1 用svg和javascript实现统计饼图
　　（1）利用（或其他的标签如等）标签将svg文件包含到asp页面中
　　其中pie.svg的主要部分为：
　　
　　在画饼图的函数drawPie()中， 通过getSVGDocument()获取SVG文档的DOM(文档对象模型)，再通过getElementById和ID（”gp”）来获取svg元素g的指针,进而可以用javascript为该元素添加子元素,即通过以下方法实现：
　　svgDoc= pieimg.getSVGDocument();gcNode = svgDoc.getElementById("gp");
　　（2）SVG中没有提供直接的扇形，可用path元素画扇型，在path的d属性中用到M（移动到）命令、L（从当前点画直线到），A（画弧线）命令、和Z（闭合）命令，这里用的都是绝对坐标。主要代码如下：
　　startX =basePointX+ radius*Math.cos(startangle);
　　startY = basePointY-radius*Math.sin(startangle);
　　endX = basePointX+radius*Math.cos(endangle);
　　endY = basePointY-radius*Math.sin(endangle);
　　pointPath = "M"+basePointX+","+basePointY;
　　pointPath += " L"+startX+","+startY;
　　if(angles[v] 本文为全文原貌 未安装PDF浏览器用户请先下载安装 原版全文 　　pieNode.setAttribute("style",fillColor);
　　newg.appendChild(pieNode);
　　其中的basePointX,basePointY是圆心；radius是扇型所在圆的半径；startX,startY是扇型弧的起始点；endX,endY是扇型弧的终止点；startangle是扇型的起始角度，本图形首先画的是代表“优秀”的扇型，令其起始角度为0，则其终止角度为0+angles[0],即起始角度+该扇型所占的角度数，紧接“优秀”扇型的“良好”扇型的起始角度就应该是“优秀”扇型的终止角度，依次类推。弧命令A的格式如下：A radiusX, radiusY x-axis-rotation large-arc-flag, sweep-flag endX, endY。radiusX, radiusY是椭圆在X和Y轴上的半径，在这里取相同值radius；参数x-axis-rotation是坐标系x轴的旋转角度，这里不旋转，取值0；通过参数large-arc-flag可以指定取起始点到终止点大弧段还是小弧段，当所画扇型占的角度小于180度时，取小弧段，即取值为0，当所画扇型占的角度大于180度时，取大弧段，即取值为1；sweep-flag参数取1时表示弧线从起始点到终止点按顺时针画，取0时表示按逆时针画，这里我们都取0；最后两个参数endX,endY是弧的终止点。
　　整个扇型的实现过程是：先将当前点移动到圆心（basePointX,basePointY）,再从圆心画直线到弧的起始点（startX,startY）,然后用A命令画弧线，最后从弧的终止点画直线回圆心完成整个扇型。每个扇型都作为子节点插入到容器元素g中。
　　
　　3 vml+javascript实现统计饼图
　　
　　VML(Vector Markup Language) 是Microsoft IE 5.0及其后续版本内嵌的矢量图形实现方式，是IE内嵌的标记语言。VML结合脚本，可以让图形产生动态的效果。VML中的两个基本的元素：shape和group定义了VML的全部结构，shape描述一个矢量图形元素，而group用来将图形结合起来作为一个整体进行处理。VML的预定义图形元素有Shape ，Path，Line，Polyline，Curve ，Rect，Roundrect，Oval，Arc，Group等。
　　（1）首先在displayscore.sp页的中建立一个vml图片容器。
　　，在javascript中根据id值引用该group。
　　 （2）VML 也没有提供直接的扇形，可使用shape对象实现饼图，在它的path属性中通过ar命令画弧线。画扇型的主要命令如下：
　　var newPie=document.createElement("");
　　group1.appendChild(newPie);
　　这里将圆心设置在相对于group1的coordsize的（2000，2000）处，先从圆心画一条直线到 弧的起始点，再通过ar命令画弧，最后从弧的终止点画直线到圆心完成该扇行。Ar命令有8个参数，前四个参数规定弧所在圆的左上角和右下角，后四个参数指定了弧的起始点和终止点，注意用ar命令画弧总是由起始点到终止点按逆时针方向画的。其中shape的title是鼠标移动到该扇行时出现的提示信息。扇型的填充色，提示信息，弧的起始点和终止点都通过参数传进来。画好该扇型后通过group1.appendChild(newPie);语句将其加入到group容器中。弧的起始点和终止点根据起始角度、终止角度和圆的半径计算出来。
　　var sx=2000+parseInt(r*Math.cos(startangle));
　　var sy=2000+parseInt(-r*Math.sin(startangle));
　　var ex=2000+parseInt(r*Math.cos(endangle));
　　var ey=2000+parseInt(-r*Math.sin(endangle));
　　其中startangle，endangle分别表示该弧的起始角度和终止角度，sx,sy为弧的起始点，ex,ey为弧的终止点。
　　
　　4 flash实现统计饼图
　　
　　由于不需要对饼图进行复杂的控制，由flash制作的动态饼图主要通过将单位饼图（占1％大小的扇型）进行旋转和反复复制实现。首先制作一个中心角为3.6度的扇型影片剪辑符号。再将该剪辑符号拖入场景，在该关键帧写AS(ActionScript)代码,主要部分如下：
　　piecolor = new Color(unitpie);
　　seColor=new Array(0xff0000,0x00FF00,0x0000fF, 0xFFFF00,0xff00ff);
　　depth=1;
　　for (i=1; i 本文为全文原貌 未安装PDF浏览器用户请先下载安装 原版全文