基于HTML5的3D圖形分析系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

葉品菊++孔超

摘要：論文主要研究基于HTML5的教師評(píng)估系統(tǒng)的3D圖形展示，系統(tǒng)完成教學(xué)評(píng)估系統(tǒng)的3D圖表展示以及數(shù)據(jù)的在線修改，使用HTML5以及HighCharts插件，將數(shù)據(jù)分析結(jié)果以3D柱狀圖、3D餅圖、3D折線圖等圖形的形式直觀地顯示出來(lái)。本系統(tǒng)3D圖實(shí)現(xiàn)了拖拽、實(shí)時(shí)修改數(shù)據(jù)、在圖上實(shí)現(xiàn)了模塊總分式的功能。該軟件適用于學(xué)校對(duì)教師資源的評(píng)估和管理以及對(duì)整體學(xué)院教師、學(xué)生各方面比例的管理。

關(guān)鍵詞： HTML5；HighCharts；3D圖形展示；教師評(píng)估系統(tǒng)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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引言

將計(jì)算機(jī)應(yīng)用于信息管理，是計(jì)算機(jī)應(yīng)用學(xué)科的一大領(lǐng)域。教學(xué)評(píng)估系統(tǒng)可以方便和全面地收集教師學(xué)工、學(xué)生、學(xué)院的數(shù)據(jù)，提供學(xué)生的評(píng)價(jià)結(jié)果，快速集中收集各方面的評(píng)教信息，是教務(wù)管理部門能夠及時(shí)了解教學(xué)動(dòng)態(tài)和師資情況，為教務(wù)老師提供相關(guān)決策支持，減輕了學(xué)院教務(wù)管理上的工作量。

本系統(tǒng)分析HTML5技術(shù)在統(tǒng)計(jì)圖表系統(tǒng)中應(yīng)用的可行性，充分結(jié)合JS技術(shù)優(yōu)勢(shì)，制作一個(gè)3D圖形控件展示軟件。使用HTML5以及HighCharts插件，將數(shù)據(jù)分析結(jié)果以3D柱狀圖、3D餅圖、3D折線圖等圖形的形式直觀地顯示出來(lái)。

2 HTML5和HighCharts

2.1 HTML5技術(shù)

HTML5是最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)，它的目的在于減少瀏覽器對(duì)插件的依賴性和豐富的網(wǎng)頁(yè)表現(xiàn)形式，同時(shí)HTML5增強(qiáng)了網(wǎng)頁(yè)在圖形繪制、媒體播放、信息傳送等方面的能力，為提高圖表展示性能創(chuàng)造了優(yōu)越的條件。

JavaScript是一種腳本語(yǔ)言，用于Web應(yīng)用開(kāi)發(fā)，可用來(lái)為網(wǎng)頁(yè)添加動(dòng)態(tài)效果。圖形控件展示軟件應(yīng)用于各行各業(yè)的圖形報(bào)表展示，可以生動(dòng)的體現(xiàn)各項(xiàng)數(shù)據(jù)信息，而3D圖形控件加入了3D效果展示，對(duì)用戶來(lái)說(shuō)更加友好直觀。

2.2 HighCharts技術(shù)

Highcharts是一個(gè)制作圖表的純JavaScript類庫(kù)，它的主要特性包括：

1） 兼容性：兼容當(dāng)今所有的瀏覽器，包括IE、iPhone和火狐等等；

2）個(gè)人用戶完全免費(fèi)使用；

3） 用純JS書(shū)寫，無(wú)BS；

4） 支持絕大部分的圖表類型：直線圖，曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅狀圖、散布圖[1]；

5） 跨語(yǔ)言：HighCharts在PHP、Asp.net和Java中都可以使用，它只需要三個(gè)文件：一個(gè)是Highcharts的核心文件highcharts.js，還有a canvas emulator for IE和Jquery類庫(kù)；

6） 提示功能：鼠標(biāo)移動(dòng)到圖表的某一點(diǎn)上會(huì)出現(xiàn)提示信息；

7） 放大功能：選中圖表部分放大，可以近距離觀察圖表[2]；

8） 易用性：不需要特殊的開(kāi)發(fā)技能，只需要設(shè)置一下選項(xiàng)就可以制作自己需要的圖表[3]。

3 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

3.1 系統(tǒng)業(yè)務(wù)模塊設(shè)計(jì)

本系統(tǒng)應(yīng)能夠直觀地以3D餅圖、3D折線圖、3D柱狀圖、3D散點(diǎn)圖等等3D圖表顯示學(xué)院、教師、學(xué)生的數(shù)據(jù)統(tǒng)計(jì)分析[4]，具體功能如下：

1） 學(xué)生模塊：學(xué)生男女比例統(tǒng)計(jì)、學(xué)生年齡分布、學(xué)生成績(jī)統(tǒng)計(jì)等功能；

2） 教師模塊：對(duì)教師人數(shù)的統(tǒng)計(jì)、教師學(xué)歷的統(tǒng)計(jì)、教師職稱的統(tǒng)計(jì)、教師年齡分布、教師成績(jī)統(tǒng)計(jì)等眾多模塊；

3） 學(xué)院模塊：各學(xué)院專業(yè)人數(shù)統(tǒng)計(jì)、學(xué)院人數(shù)的統(tǒng)計(jì)。教師人數(shù)統(tǒng)計(jì)、專業(yè)人數(shù)變化統(tǒng)計(jì)。

教師信息統(tǒng)計(jì)模塊主要根據(jù)教師信息，用3D圖表展示教師的學(xué)歷、年齡和職稱分布情況，以及教師教學(xué)成績(jī)，并實(shí)現(xiàn)數(shù)據(jù)修改功能。具體可分為以下幾個(gè)功能：

1）教師人數(shù)統(tǒng)計(jì)：顯示近五年來(lái)教師人數(shù)變化3D面積圖；

2）教師基本信息：顯示教師年齡分布3D餅圖、學(xué)歷分布3D餅圖以及各個(gè)職稱統(tǒng)計(jì)的3D柱狀圖和3D餅圖；

3）教師評(píng)價(jià)：顯示教師教學(xué)成績(jī)3D柱狀圖、學(xué)生評(píng)價(jià)3D折線圖和總成績(jī)3D散點(diǎn)圖。

3.2 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

以教師模塊為例，該模塊主要根據(jù)教師信息，用3D圖表展示教師的學(xué)歷、年齡和職稱分布情況，以及教師教學(xué)成績(jī)，并實(shí)現(xiàn)數(shù)據(jù)修改功能。

下面，以查看教師教學(xué)評(píng)價(jià)功能為例，介紹3D散點(diǎn)圖的設(shè)計(jì)與實(shí)現(xiàn)方法。

教師教學(xué)評(píng)價(jià)3D散點(diǎn)圖界面如下。

3.2.1 設(shè)計(jì)思路

散點(diǎn)空間坐標(biāo)有x、y、z，依次表示：講課授課能力、學(xué)生滿意度、教師儀表。

首先調(diào)用jQuery ajax - ajax（）方法中 url："data2！tscatter"通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)庫(kù)中教師成績(jī)數(shù)據(jù)，接著全局配置Highcharts，給點(diǎn)一個(gè)三維的感覺(jué)，增加一個(gè)徑向梯度。繼續(xù)建立圖表并設(shè)置一些關(guān)于圖表區(qū)和圖形區(qū)的參數(shù)及一般圖表通用參數(shù)包括：圖表描繪出后放到頁(yè)面的某一具體位置、指定繪制區(qū)所要繪制的圖的類型、3D圖像設(shè)置項(xiàng)等等，然后添加鼠標(biāo)旋轉(zhuǎn)事件，最后先運(yùn)行測(cè)試再正式運(yùn)行。

3.2.2 核心代碼

數(shù)據(jù)訪問(wèn)層主要代碼：

publicList showAll（String hql） {

// TODO Auto-generated method stub

System.out.println（"正在執(zhí)行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；

}

業(yè)務(wù)層主要代碼：

public String tscatter（） throws Exception {

System.out.println（"Action中l(wèi)inetscore方法"）；

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

list = jxpgServiceImp.showAll（hql）；

4 小結(jié)

教學(xué)評(píng)估系統(tǒng)面向教師、學(xué)生、學(xué)院等事務(wù)處理，包括人數(shù)、男女比例、學(xué)歷、職稱等各方面通過(guò)3D圖的展示。能夠清楚的展示數(shù)據(jù)的變化和修改數(shù)據(jù)。使得對(duì)數(shù)據(jù)的展示更加的直觀。學(xué)校對(duì)教師資源的管理利用圖形控件更加直觀的了解和掌握學(xué)校的師資情況。

參考文獻(xiàn)：

[1] 鄧夢(mèng)德.HTML5的新特性及其在基于Web的教學(xué)平臺(tái)開(kāi)發(fā)中的應(yīng)用前景[J].電腦知識(shí)與技術(shù)，2014（6）.

[2] 唐彬.利用HTML5 實(shí)現(xiàn)網(wǎng)頁(yè)圖表的研究[J].微型電腦應(yīng)用，2012（10）.

[3] 張劍，陳劍鋒，王強(qiáng). HTML5 新特性及其安全性研究[J].信息安全與通信保密，2013（5）.

[4] 譚文文，丁世勇，李桂英.基于WebGL 和HTML5 的網(wǎng)頁(yè)3D 動(dòng)畫(huà)的設(shè)計(jì)與實(shí)現(xiàn)[J].2011（10）.