信息技术
·175·
基于HTML5
5与HighCharts的网页3D动画的设计与实现
叶品菊余建平
（常州信息职业技术学院软件学院，江苏常州213164)
商要：主要研究基于HTML5与HighCharts的学院信息管理承统的3D图形展示开发设计。项目以MyEclipse8.5为开发工具、使摘
用Java、HTML5以及HighCharts插件，将学院的各项数据分析结果以3D柱状图、饼图、BAR图等图形的形式直观地显示出来。学院通过各二级学院学生人数、教师人数、专业人数变化统计3D图，更方便掌握学院情况，从而更有效的进行学院的管理，
关键词：HTML5；HighCharts；学院信息管理系统；3D动函
1概述
教育信息化不仅带来了教学方式的变革，还带来了教学管理的新模式，各学校都开始对学校进行信息化管理。学院管理系统能准确、及时地反映学校各项工作的当前状态，能根据过去的数据预测未来，能从全局出发辅助学校各职能部门。因固此，采用图表模型将学院数据直观的显示出来，可以为学校管理者的管理行为提供有效信息。论文主要基于HTML5与HighCharts的学院信息管理系统的3D 图形展示开发设计，将学院的各项数据分析结果以3D柱状图、饼图、BAR图等形式直观地显示出来。学院通过各二级学院学生人数、专业人数变化统计3D图，更方便掌握学院情况，从而更有效的进行学院的管理。
2HTML5新特性 2.1新绘图画布模式
Canvas可以用来进行绘制图形允许使用脚本动态演染点阵图 Camvas允许你在HTML5中，使用JavaSeript去绘制你喜欢的任
何图形，包括文字、图片、线等。Canvas使用Canvas2DAPI去绘制图形，它的API功能十分强大，最重要的是，大部分的浏览器都支持
包括Opera,Firefox和 Safari。面且某些版本的
2D canvas
Opera还支持3Dcanvas，firefox，也可以通过插件形式支持3D canvas/
2.2新的图片图形交互功能
HTML5赋予图片图形更多的交互可能，HTML5的canvas标签还能够配合JavaScript通过键盘控制图形图像，为现有的网页游戏提供新的选择和更好的维护性，脱离了且ash插件的网页游戏必然能够获得更大的访间量、更多的用户。一此统计数据表格也可以通过使用camvas标签来达到和用户的交互。
2.3新应用程序接口(API
HTML5可从网络中提取信息的类数据库查询语言WebSQL、可绘制华丽2D/3D图像的高性能CanvasAPI、语义化的标签和多媒体功能、扩展的描述级联样式表CSS3、原生的DragDrop拖放，以及用于感知用户当前位置提供给应用程序使用的GeoLocation等 3]
3HighCharts技术简介
Highcharts是一个用纯JavaSeript编写的一个图表库，能够很简单便捷的在web网站添加有交互性的图表。可以制作的图表有：曲线图、直线图、区域图、区域曲线图、柱状图、散状图等等。主要特性包括：(1)提示功能：鼠标移动到图表的某一点上有提示信息：(2)激大功能：选中图表部分放大，近距离观察图表；(3)兼容性：兼容当今所有的浏览器，包括iPhone、IE和火孤等等用；(4)支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图：(5)易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表：
4网页3D动画设计与实现
以学院教师人数3D组合图为例，介绍学院信息管理系统3D分析图形的设计方法。界面设计如图1。
4.1设计思路
使用3D柱状图和3D折线图组合，3D柱状图显示学院教师人数，3D折线是结合柱状显示二级学院教师随着月份人数的变化曲线。通过使用3D柱状、折线组合图，形象生动的展示各个二级学院教师人数和人数的变化，便于学院对教师人数的管理。首先调用 ajax0方法中，url:"data2!zyColumn"，通过HTTP请求加载远程数
据库中每个学院的教师人数数据，接着全局配置High-charts，给点一个三维的感觉，增加一个径向梯度。继续建立图表并设置一些关于图表区和图形区的参数及一般图表通
nnes
图1学院教师人数3D组合图
用参数包括：图表描
绘出后放到页面的某一具体位置、指定绘制区所要绘制的图的类型、3D图像设置项等等，然后添加鼠标旋转事件通过调用Dynamic-CreateSubChart方法动态创建显示副图表，最后先运行测试再正式运行。
4.2主要程序代码数据访间层主要代码：
pullie List shovAll(String l) (
Syxmaxt,println(“ 正在执行 TrdDAOInp 中的 shrAll 方法“% List list = new Armaylia(:
Seoion staion =
reienFackey aprnSnxin()
sessienudlear()
Transxelinn trasa = xin.beginTrareartienl):(ja(kan()-srogjsas = Sianb Sian)
lit = qurryliat() trans,comia(t sessienrdese(t
Sytrmet,peistls(*TrsDAOlnp 中全部查均或动) “%
) catch (HilxenateExeeptien e) 1
查通不或功
c.peinStarkTrare) pebum list
业务层主要代码：
palic Sring tseate(1 throxs Exceptien (
Systent,out.peintln(*TestDAOImp 中全:部
Syvlemuut,prindla(*Action 中 lisrteem 方法; *):
String hl = *eeleet j-Narubera1,zhmx3,zhma5 fnen TrarherSoare*: lit = jspgServicelmpskowAll(qlt
Sytmet.peinla("教师成续放点
retum "pie': 5结论
))*+litaien(ks
本系统3D图实现了拖、实时修改数据改变数据库数据、在图上实现了模块总分式的功能。学院信息管理系统3D分析图形适用于对整体学院教师、学生各方面比例的管理。在实际应用中， HTML5动态数据3D展示技术可应用于大部分企业网站统计中，改变传统的二维图形展示模式。
参考文献
[I]谷伟.基于HTMI5Canvas的客户端图表术研究[J]信息技术， 2013(9)
[2]徐久成,孔德宇,貉阳阳.基于HTML5的移动在线教育平台学习支持技术[J].河南大学师范学院学报(自然科学版),2015(5)
[3]平激文,添珏羽,张学金,柱晓荣.基于HTML5和JavaScript轻量型动框架开发[]计算机技术与发展,2013(12)
[4]黄聪会,陈靖,张黎,李东阳.利用HTML5实现网页图表的研究[J] 微型电脑应用,2012(10).