基于HTML5的教学管理3D图形分析系统研究与设计

叶品菊，刘 伟，杨甜甜，常 雨

(常州信息职业技术学院，江苏 常州 213164)

科技与应用

基于HTML5的教学管理3D图形分析系统研究与设计

叶品菊，刘 伟，杨甜甜，常 雨

(常州信息职业技术学院，江苏 常州 213164)

主要研究基于HTML5的教学管理图形分析系统的3D图形展示开发与设计，系统包括学生人数统计、学生成绩统计、学院的各专业人数统计等功能，使用java和html5以及HighCharts插件，将数据分析结果以3D柱状图、饼图、折线图等图形的形式直观地显示出来，为学校和教务管理人员提供简明详细的分析数据，加快了学校管理信息化进程。

HTML5；HighChart；教学管理；图形分析系统

1 引言

教务管理是一项非常重要的工作。随着学生人数的迅速增加，教务管理日趋复杂，高校教务部门对各种教学信息的处理与分析工作也越来越重要和复杂。大多数高校都建立起数字化、网络化的教务管理系统，加快了学校管理信息化进程,为在校教师和学生提供方便快捷的服务。

论文主要研究基于HTML5的学生信息分析系统的3D图形展示开发与设计，使用java和html5以及HighCharts插件，将数据分析结果以3D柱状图、饼图、折线图等图形的形式直观地显示出来，为学校和教务管理人员提供简明详细的分析数据。

2 系统架构分析

系统采用J2EE技术作为开发技术，使用平台为MyEclipse8.5，使用Microsoft SQL Server 2008作为系统数据库。具有可视性强、设计成本小、安全性好、方便维护等优点。

2.1 MVC软件架构模式

系统应用成熟稳定的SSH三层框架技术。分为三个层次：视图层、控制层和模型层。分层结构将用户界面、业务逻辑和数据进行了分离，实现了系统内部松耦合，以灵活、快速地响应业务需求的变化，系统主要使用MVC设计模式。

各层实现功能说明：

View层是与客户的交互层，负责显示出数据经过统计分析后形成的图形，同时接受用户对数据进行的修改操作。

Control层负责不同层面间的组织，用于控制应用程序的流程。

Model层主要用于封装与应用程序的业务逻辑相关的数据以及数据的处理方法，由数据访问层和实体类组成。

2.2 SSH框架技术

SSH是多个框架的集合，是目前很流行的一种Web应用程序开源集成框架，用于构建灵活、易于扩展的多层Web应用程序[1]。

集成SSH框架的系统分为四层：表示层、业务逻辑层、数据持久层和实体层。

Struts作为系统的整体基础架构，负责MVC的分离，在Struts框架的模型部分，控制业务跳转，利用Hibernate框架对持久层提供支持。Spring[2]负责搜索、定位、创建和管理对象及对象之间的依赖关系。

2.3 HTML5技术

到目前为止，在浏览器当中直接能跟图片的交互操作也很有限，多数是保存和点击[3]。如果希望跟图片进行更多的操作或者在浏览器当中画出图形，就需要silverlight、flash。而HTML5通过canvas，用户将可以动态的生成各种图形图像，图表以及动画[4]。

3 系统设计与实现

本系统基于HTML5技术将教学管理信息数据分析结果以3D图形形式展示，分为学生、教师、学院三个模块，包括学生人数统计、学生成绩统计、学院各专业人数统计等功能。

3.1 系统业务模块设计

系统具有的功能模块描述如下：

(1) 学生模块

学生男女比例统计、学生年龄分布、学生成绩统计等功能；

(2) 教师模块

对教师人数的统计、教师学历的统计、教师职称的统计、教师年龄分布等众多模块；

(3) 学院模块

各学院专业人数统计、学院人数的统计。教师人数统计、专业人数变化统计。

3.2 系统设计与实现

以学生信息管理模块为例。学生功能用例图如图1所示。

图1 学生信息管理功能用例图

主要根据数据库中的学生信息，按照学院、班级分析学生的男女比例、学生的年龄分布和学生的成绩，用3D图表的形式展示。

学生信息管理模块3D图形如图2所示。

图2 学生信息管理模块3D图形分析

下面，展示学生信息管理模块图形显示中的重要代码。学生人数变化3D面积图显示部分JavaScript代码如下：

function PopulateProductSales() {

var Item = new Array();

var temp=[];

var temp2=[];

$.ajax({url: ("data2!xybh"),

type: "POST",

contentType: "application/json; charset=utf-8",

dataType : "json",

success: function (result) {

var j=1;

for (var i = 5; i < 10; i++) { temp.push((result.list[0])[i]);

var item = new Object();

item["学期"]= '201'+(j++);

item["人数"]= (result.list[0])[i]; Item.push(item);

}

var chart1;

chart1 = new cfx.Chart();

var titles = chart1.getTitles(); var title = new fx.TitleDockable();

title.setText("");

titles.add(title); chart1.setGallery(cfx.Gallery.Lines); chart1.getView3D().setEnabled(true); chart1.getView3D().setCluster(true); chart1.setDataSource(Item);

chart1.create('container'); },

error: function (xhr, txt, err) {

alert("error connecting to data: " + txt); } });

}

4 小结

以3D图形形式展示数据分析的结果，方便教务管理员清晰直观地看到教务各数据的统计分析。系统还可通过展现组合图展示出不同数据中的联系，全面、多角度分析数据，增加了结论的准确性和可信服性。

[1]马建军,刘虎,倪芳英.基于SSH与Highcarts整合架构的Web应用研究[J].计算机技术与发展，2013(9).

[2]黄永慧,陈程凯.HTML5在移动应用开发上的应用前景[J].计算机技术与发展，2013(7).

[3]平淑文,潘珏羽,张学金,杜晓荣.基于HTML5 和JavaScript 轻量型动画框架开发[J].计算机技术与发展，2013(12).

[4]麦冬, 岑贤生, 孔令文.开源图形库Highcharts与jQuery的整合应用[J].轻工科技，2013(3).

(责任编辑：孙强)

The Implementation of Educational Information Graphical Analysis System Based on HTML5

YE Pin-ju,LIU Wei,YANG Tian-tian,CHANG Yu

(School of Software, Changzhou College of Information Technology, Changzhou, Jiangsu 213164, China)

The paper mainly researches the development and design of 3D graphics display of Teaching Management graphical analysis System based on HTML5. The system includes student statistics, student achievement statistics, the number of school professional, etc.. Using java and html5 and HighCharts widget, it displays data analysis results graphically in the form of 3D bar, pie, line charts, etc., provides concise detailed analysis of data for schools and educational administration personnel, and speeds up the process of school management information.

HTML5; HighCharts; teaching management; graphical analysis system

2015-10-20

江苏高校品牌专业建设工程资助项目(PPZY2015A090)

叶品菊(1980-)，女，湖北荆州人，软件学院讲师，工程师，硕士，主要研究方向为数据库应用。

TP311.138

A

1671-4385(2015)06-0081-03