基于HTML5的3D图形分析系统设计与实现

叶品菊++孔超

摘要：论文主要研究基于HTML5的教师评估系统的3D图形展示，系统完成教学评估系统的3D图表展示以及数据的在线修改，使用HTML5以及HighCharts插件，将数据分析结果以3D柱状图、3D饼图、3D折线图等图形的形式直观地显示出来。本系统3D图实现了拖拽、实时修改数据、在图上实现了模块总分式的功能。该软件适用于学校对教师资源的评估和管理以及对整体学院教师、学生各方面比例的管理。

关键词： HTML5；HighCharts；3D图形展示；教师评估系统

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2015）24-0140-02

The Design and Implementationof 3D Graphical Analysis System based on HTML5

YE Pin-ju， KONG Chao

（School of Software， Changzhou College of Information Technology， Changzhou 213164， China）

Abstract： The paper mainly researches the development and design of 3D graphics display of teacher evaluation system based on HTML5.The system completes the 3D chart display and online data modifications of teacher evaluation system.Using java and html5 and High Charts widget，it displays data analysis results graphically in the form of 3D bar， pie， line charts， etc.The 3D charts implement the drag， real-time data changes and achieve the module out of style functions on the graph.The software is suitable for school to assessment and management of teacher resources， and management of overall faculty， students all aspects of proportion .

Key words： HTML5； High Charts； 3D graphics display； educational information analysis system

1引言

将计算机应用于信息管理，是计算机应用学科的一大领域。教学评估系统可以方便和全面地收集教师学工、学生、学院的数据，提供学生的评价结果，快速集中收集各方面的评教信息，是教务管理部门能够及时了解教学动态和师资情况，为教务老师提供相关决策支持，减轻了学院教务管理上的工作量。

本系统分析HTML5技术在统计图表系统中应用的可行性，充分结合JS技术优势，制作一个3D图形控件展示软件。使用HTML5以及HighCharts插件，将数据分析结果以3D柱状图、3D饼图、3D折线图等图形的形式直观地显示出来。

2 HTML5和HighCharts

2.1 HTML5技术

HTML5是最新的网页标准，它的目的在于减少浏览器对插件的依赖性和丰富的网页表现形式，同时HTML5增强了网页在图形绘制、媒体播放、信息传送等方面的能力，为提高图表展示性能创造了优越的条件。

JavaScript是一种脚本语言，用于Web应用开发，可用来为网页添加动态效果。图形控件展示软件应用于各行各业的图形报表展示，可以生动的体现各项数据信息，而3D图形控件加入了3D效果展示，对用户来说更加友好直观。

2.2 HighCharts技术

Highcharts是一个制作图表的纯JavaScript类库，它的主要特性包括：

1） 兼容性：兼容当今所有的浏览器，包括IE、iPhone和火狐等等；

2）个人用户完全免费使用；

3） 用纯JS书写，无BS；

4） 支持绝大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼状图、散布图[1]；

5） 跨语言：HighCharts在PHP、Asp.net和Java中都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库；

6） 提示功能：鼠标移动到图表的某一点上会出现提示信息；

7） 放大功能：选中图表部分放大，可以近距离观察图表[2]；

8） 易用性：不需要特殊的开发技能，只需要设置一下选项就可以制作自己需要的图表[3]。

3 系统设计与实现

3.1 系统业务模块设计

本系统应能够直观地以3D饼图、3D折线图、3D柱状图、3D散点图等等3D图表显示学院、教师、学生的数据统计分析[4]，具体功能如下：

1） 学生模块：学生男女比例统计、学生年龄分布、学生成绩统计等功能；

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

3） 学院模块：各学院专业人数统计、学院人数的统计。教师人数统计、专业人数变化统计。

教师信息统计模块主要根据教师信息，用3D图表展示教师的学历、年龄和职称分布情况，以及教师教学成绩，并实现数据修改功能。具体可分为以下几个功能：

1）教师人数统计：显示近五年来教师人数变化3D面积图；

2）教师基本信息：显示教师年龄分布3D饼图、学历分布3D饼图以及各个职称统计的3D柱状图和3D饼图；

3）教师评价：显示教师教学成绩3D柱状图、学生评价3D折线图和总成绩3D散点图。

3.2 系统设计与实现

以教师模块为例，该模块主要根据教师信息，用3D图表展示教师的学历、年龄和职称分布情况，以及教师教学成绩，并实现数据修改功能。

下面，以查看教师教学评价功能为例，介绍3D散点图的设计与实现方法。

教师教学评价3D散点图界面如下。

3.2.1 设计思路

散点空间坐标有x、y、z，依次表示：讲课授课能力、学生满意度、教师仪表。

首先调用jQuery ajax - ajax（）方法中 url："data2！tscatter"通过 HTTP 请求加载远程数据库中教师成绩数据，接着全局配置Highcharts，给点一个三维的感觉，增加一个径向梯度。继续建立图表并设置一些关于图表区和图形区的参数及一般图表通用参数包括：图表描绘出后放到页面的某一具体位置、指定绘制区所要绘制的图的类型、3D图像设置项等等，然后添加鼠标旋转事件，最后先运行测试再正式运行。

3.2.2 核心代码

数据访问层主要代码：

publicList showAll（String hql） {

// TODO Auto-generated method stub

System.out.println（"正在执行TestDAOImp中的showAll方法"）；

List list = newArrayList（）；

try {

Session session = sessionFactory.openSession（）；

session.clear（）；

Transaction trans = session.beginTransaction（）；

Query query = session.createQuery（hql）；

list = query.list（）；

trans.commit（）；

session.close（）；

System.out.println（"TestDAOImp中全部查询成功"）；

} catch （HibernateException e） {

System.out.println（"TestDAOImp中全部查询不成功"）；

e.printStackTrace（）；

}

return list；

}

业务层主要代码：

public String tscatter（） throws Exception {

System.out.println（"Action中linetscore方法"）；

String hql = "select jsName，zbmx1，zbmx3，zbmx5 from TeacherScore"；

list = jxpgServiceImp.showAll（hql）；

4 小结

教学评估系统面向教师、学生、学院等事务处理，包括人数、男女比例、学历、职称等各方面通过3D图的展示。能够清楚的展示数据的变化和修改数据。使得对数据的展示更加的直观。学校对教师资源的管理利用图形控件更加直观的了解和掌握学校的师资情况。

参考文献：

[1] 邓梦德.HTML5的新特性及其在基于Web的教学平台开发中的应用前景[J].电脑知识与技术，2014（6）.

[2] 唐彬.利用HTML5 实现网页图表的研究[J].微型电脑应用，2012（10）.

[3] 张剑，陈剑锋，王强. HTML5 新特性及其安全性研究[J].信息安全与通信保密，2013（5）.

[4] 谭文文，丁世勇，李桂英.基于WebGL 和HTML5 的网页3D 动画的设计与实现[J].2011（10）.