论文部分内容阅读
摘要：通过实现网上教学平台中教师端对学生在线测试成绩的统计饼图，本文描述了用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；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 专门的标记描述的矢量图形有矩形、圆、椭圆、直线、折线和多边形。对于不能用上述图形表示的复杂图形可以用路径
2.1 用svg和javascript实现统计饼图
（1）利用