高校教學狀態數據可視化分析平臺的設計與實現

李 蘋，李 勇，范全潤

（曲靖師范學院 信息工程學院，云南 曲靖 655011）

隨著信息管理系統集成水平、大數據和物聯網通信等現代信息技術的發展，以及高校教育規模的不斷擴大，使得高校現有的各類信息管理系統（如招生就業管理系統、科研管理系統、教職工人事管理系統等）中逐步積累了海量的教學狀態數據。然而，由于現有數據管理方式以及用戶對專業數據的理解能力和觀察視角等因素的限制，這些海量教學狀態數據中的潛在含義卻沒有被充分挖掘和直觀地展示給用戶。

數據可視化技術已成為近年來數據挖掘和信息可視化領域的一個研究熱點，也正因為此，有關數據可視化的技術被廣泛應用在各行業領域。王桃蘋等[1]以南海船舶數據為基礎，基于百度地圖API、ECharts 等技術，采用B/S 架構設計實現了一款南海船舶數據可視化分析系統；魏忠[2]設計實現了實驗室實時數據智能管理系統，實現了智能實驗室管理的可視化展現；任鵬等[3]基于Shiny 網頁框架構建了海洋浮標監測大數據可視化實驗平臺；嚴承希等[4]采用可視化分析方法揭示了大學生網絡行為在學期、周、小時等多重時間粒度下的分布特征，為大數據環境下理解大學生的網絡生活規律和支持企業個性化推薦服務提供了科學參考；張瑞等[5]以上市公司數據為基礎展開可視化實踐案例分析，為金融數據從網絡到終端應用的可視化提供了一個具體的解決方案；裴雨清等[6]基于HighCharts 圖表工具、Math.Net 開源類庫等實現了針對研究霧霾影響光伏發電系統的可視化分析平臺；李銀奎[7]利用開源工具，實現了長時的心電圖（ECG）時鐘可視化；姜高揚等[8]提出了基于建模仿真的可視化教學模式；付曉倩等[9]基于MVC 架構和ECharts 插件，以某高校某學期中的Access 數據庫考試系統中的多次測驗數據為數據源，開發了教學數據的可視化平臺。

鑒于上述研究成果，本文為了能夠給用戶提供直觀了解高校教學狀態的視覺窗口，輔助用戶客觀全面地了解高校的整體教學質量提供可視化的數據支持。同時，為教育質量管理者正確評估高校的教育質量提供管理和監測平臺，為其適當調整專業結構、加強招生就業管理和專業課程建設等提供可視化的數據支持。因此，本文以曲靖師范學院教學狀態數據可視化分析平臺的設計與實現為例，描述高校教學狀態可視化分析平臺實現的主要任務，詳細介紹平臺的總體架構設計、數據庫設計、功能模塊設計及其主要功能的實現過程等方面的內容。

1 問題描述

高校教學狀態數據涉及招生就業、師資結構、科研項目、課程建設等眾多方面的海量數據內容，具有信息種類多、數據存儲容量大、涉及用戶面廣等特點。在這些海量的數據內容中，招生就業管理工作涉及全校所有專業學生從入學到離校各個活動環節中的信息內容，能夠從生源質量、畢業生就業率、就業滿意度、專業相關度、就業薪資水平、畢業去向等多方面反映高校的教育質量，可以為不同用戶提供了解高校教學狀態的視覺窗口[10]。因此，本文選擇基于曲靖師范學院2018 年招生就業工作中的真實數據為基礎的教學狀態數據可視化分析平臺為例進行介紹，其實現的主要任務如下。

任務1：以省、直轄市、自治區為基本行政單位，統計出2018 年曲靖師范學院不同生源地的文科招生人數、理科招生人數、總人數，并在平臺上以圖表的方式直觀展示出來。

任務2：以學院為基本單位，統計出2018 年曲靖師范學院下屬14 個二級學院學生的就業率、專業相關度、就業滿意度、就業薪資、就業去向，并在平臺上以圖表的方式直觀展示出來。

任務3：根據平臺上展示的數據，分析曲靖師范學院的招生質量、不同二級學院學生的就業質量，招生和就業兩者之間的內在聯系以及平臺上體現的教學質量監測結果。

2 可視化分析平臺設計

2.1 總體架構設計

本文以曲靖師范學院教學狀態數據可視化分析平臺的設計與實現為例，其總體架構設計如圖1 所示，主要由物理資源層、基礎環境層、數據業務層、數據可視化層4 部分組成。

圖1 數據可視化分析平臺架構

各層包含的主要內容及其作用如下：

（1）物理資源層：包括CPU 計算資源、內外存儲資源、數據存儲所需的網絡通信資源，以及其他的硬件條件，主要為數據可視化分析平臺運行和開發提供所需的物理硬件條件支撐。

（2）基礎環境層：基于Windows Server 操作系統，為數據可視化分析平臺提供運行和開發需要的Java IDE 集成開發環境、Tomcat 數據管理環境，以及平臺運行和開發所需要的其他必要環境支撐。

（3）數據業務層：以曲靖師范學院的招生就業管理系統為基礎構建數據庫，采用JDBC 數據連接管理方法和JSON 數據對象表示方法從中抽取可視化分析平臺所需的招生與就業相關數據，為平臺數據可視化層的實現提供數據和邏輯業務支撐。

（4）數據可視化層：采用Servlet 動態網頁開發技術實現Web 數據可視化分析平臺，并以此Web 平臺為載體，采用ECharts 可視化插件將從數據業務層抽取得到的數據以圖表的形式直觀地展示在Web 平臺的前端頁面，為用戶提供一個可以直觀查看招生就業狀態數據的視覺窗口。

2.2 數據庫設計

本文采用結構化數據提取方法[11]，以曲靖師范學院2018 年招生就業工作中的真實數據為基礎，提取所需的數據構建可視化分析平臺實現的數據庫，其結構和包含主要數據內容如圖2 所示。

圖2 可視化分析平臺數據庫結構

2.3 功能模塊設計

本文可視化分析平臺包括2 個主要功能模塊：數據管理模塊，完成數據的同步與管理；數據可視化模塊，滿足不同需求用戶下的數據可視化展示。平臺包含的主要功能結構如圖3 所示。

圖3 可視化分析平臺主要功能模塊

（1）數據管理模塊。提供招生和就業數據的管理，對采集到的非結構化數據進行整理分析，格式轉換，形成結構化數據，存儲到數據庫中供數據可視化模塊使用。該模塊還附有修改、刪除和查詢等功能，由平臺管理員進行操作。

（2）數據可視化模塊。用Ajax 將請求發送給服務器，服務器連接數據庫后，構造成ECharts 所支持的數據結構，返回前端，使用ECharts 的柱狀圖、餅圖、扇形圖和折線圖，展示招生情況和就業情況。

招生情況數據可視化采用柱形圖表示，用不同的子系列表示同一省份內文理科的招生人數，可以比較同一省份的文理科招生人數，也可以橫向比較不同省份的招生人數。

同樣的方法應用在就業率、專業相關度和就業滿意度的可視化，既可以分析同一學院內的情況，也可以對各個學院進行橫向比較。

畢業去向用折線圖表示，根據目前就業的方向大致分為“出國出境”“參軍入伍”“自主創業”“公務員”“事業單位”“企業就業”和“考研升學”等去向，用折線圖的大致走向和面積分析畢業去向的比重。

就業薪資統計展示各學院的畢業生平均月收入情況。

3 可視化分析平臺實現

3.1 相關技術

平臺基于Java 和ECharts 技術，采用B/S 結構開發實現，主要涉及如下相關技術：

（1）Servlet 技術。Servlet[12]（Java Server Applet，Java 服務器小程序），具有跨平臺、與協議無關性、安全、高效等技術特點，是一種由Sun 公司提出的動態網頁解決方案、基于Java 編程語言實現Web 服務器端編程的技術，其主要功能是在Web 服務器端獲取客戶端的網頁請求并動態的生成對客戶端的響應信息,即動態地生成Web 響應內容，更多有關Servlet 技術的詳細內容可參考文獻[12]。

（2）JSON 技術。JSON[13]（JavaScript Object Notation，JavaScript 對象表示法），是一種輕量級的數據交換格式技術，采用完全獨立于編程語言的文本格式來存儲和表s示數據，具有兼容性好、易于理解閱讀、機器解析生成、支持多語言、執行效率高等技術優點，更多有關JSON 技術的詳細內容可參考文獻[13]。

（3）ECharts[14]（Enterprise Charts，商業級數據圖表庫）。是一個使用JavaScript 實現的開源可視化圖表庫，常用于PC 機或移動設備上的絕大部分主流瀏覽器，底層依賴輕量級的矢量圖形庫ZRender 構建而成，提供直觀、交互豐富、可高度個性化定制的數據可視化圖表，更多有關ECharts 的詳細內容可參考文獻[14]。

3.2 主要功能的實現過程

平臺采用B/S 結構的Web 方式實現，其主要功能由后臺和前臺2 部分組成。后臺通過Java 統計數據庫中的數據，前臺使用Ajax 支持下的ECharts 圖表展示所需要的數據內容，其主要功能的實現過程如下：

1）步驟1 平臺數據庫實現。

根據平臺設計需求及上述數據描述的分析。采用MySQL 創建平臺數據庫并完成表的結構設計；從曲靖師范學院招生就業管理系統中抽取2018 年的招生就業數據導入平臺數據庫，完成平臺數據庫構建，有關使用MySQL 構建數據庫的詳情操作過程可參考文獻[15]。

2）步驟2 平臺后臺管理中心實現。

后臺管理中心采用J2EE 和SSM 框架技術實現，效果如圖4 所示，平臺管理員只需要打開后臺就能方便地了解招生就業數據。平臺整體結構分為表示層、業務邏輯層、服務層、數據層，具體細分為entity 層、dao 層、service 層和controller 層。后臺管理系統中實現了就業薪資管理、就業統計管理、招生統計管理等功能模塊，各個功能模塊主要以CRUD 操作為主，下面以薪資管理模塊為例描述具體實現的過程。

首先，在spring-servlet.xml 中設置數據庫連接池，關鍵代碼如下：

＜bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"＞

＜property name="driverClassName" value="com.mysql.jdbc.Driver" /＞

＜property name="url" value="jdbc:mysql://localhost:3306/viewdata_qjnu?characterEncoding=utf-8"/＞

＜property name="username" value="root" /＞

＜property name="password" value="123456" /＞

＜/bean＞

其次，以MonthlyIncome 表為例，在entity 層創建MonthlyIncome.java 實體類對表進行映射。在dao層定義接口類MonthlyIncomeDao.java，部分關鍵代碼如下：

public interface MonthlyIncomeDao {

public List＜MonthlyIncome＞ selectAll();｝

在Mybatis 中創建MonthlyIncome.xml 文件添加配置實現映射，對數據庫相關操作進行封裝，對數據進行持久化操作，根據相應的ID 匹配接口中對應方法，部分關鍵代碼如下：

＜mapper namespace="main.dao.MonthlyIncomeDao"＞

＜!-- 查詢全部 --＞

＜select id="selectAll" resultType="main.entity.MonthlyIncome"＞

select * from MonthlyIncome

＜/select＞

＜/mapper＞

然后，在service 層中創建MonthlyIncomeService.java 負責非CRUD 的方法，部分關鍵代碼如下：

@Service

public class MonthlyIncomeService {

@Autowired

private MonthlyIncomeDao idao;

public List＜MonthlyIncome＞

selectAll(){ return idao.selectAll();}}

最后，在Controller 層創建MonthlyIncomeCtrl.java負責業務調度，接收前端傳過來的參數進行業務操作，再將處理結果返回到前端，部分關鍵代碼如下：

@Controller

public class MonthlyIncomeCtrl {

@Autowired

private MonthlyIncomeService mService;

@RequestMapping("/MonthlyIncomeMV.do")

public ModelAndView MonthlyIncomeMV(){

List＜MonthlyIncome＞ selectAll=mService.selectAll();

ModelAndView mv=new ModelAndView();

mv.addObject("all",selectAll);

mv.setViewName("table");

return mv;}}

圖4 可視化分析平臺后臺管理中心

3）步驟3 平臺前端Web 頁面數據業務的實現。

用Servlet 接收請求，調用Dao 類讀取數據，把讀取到的數據封裝成JSON 對象并發送給前端，部分程序關鍵代碼如下：

protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {NativeplaceDao n = new NativeplaceDao();

/*用Dao 類返回查詢結果，并放到一個集合*/

ArrayList＜NativeplaceBean＞ narray = n.read();

/*把集合中的值存放到相應的數組中*/

for(int i = 0; i ＜ narray.size(); i++) {

Province_Name[i] =narray.get(i).getProvince_Name();

Arts[i] = narray.get(i).getArts();

Science[i] = narray.get(i).getScience();

Count[i] = narray.get(i).getCount();}

/*在JSON 對象中存入對應的鍵值對并返回給前端*/

JSONObject result = new JSONObject();

result.put("Province_Name",Province_Name);

result.put("Arts",Arts);

result.put("Science",Science);

result.put("Count",Count);

PrintWriter out = response.getWriter();

out.println(result);}

4） 步驟4 平臺前端Web頁面圖表展示功能的實現。

首先，新建JSP 頁面，引入echarts.js 文件，代碼如下：

＜script src="js/echarts.js"＞＜/script＞

準備一個存放圖表的容器，初始化實例，代碼如下：

＜div id="main" style="height:629px;width:964px;"＞

var myChart1 = echarts.init(document.getElement-ById('right');

設置圖表的配置屬性option，并設置異步請求的Ajax，關鍵代碼如下：

Var myChart = echarts.init(document.

getElementById('main'));

$(function() {

$.get('ReadNativePlaceServlet.do').done(function(d ata) {

data = JSON.parse(data);

// 將JSON 字符串轉為JSON 對象

myChart.setOption({

title: {

text: '2018 年各省錄取人數',

……

data: data.Count})

然后，根據相應數據需要的展示效果，選擇對應的ECharts 圖表。

在招生情況統計中，采用漸變柱狀圖展示2018年各省份錄取人數情況。柱狀圖適用于各要素關于某一指標的比較情景，其中橫坐標表示省份，縱坐標表示人數，效果如圖5 所示。

圖5 2018 年招生情況統計可視化

在就業情況統計中，采用柱狀圖和餅圖結合展示2018 年各學院就業率、專業相關度、就業滿意度情況。其中柱狀圖展示每個學院對應每類的情況，餅圖是對每類情況的一個總和的展示，效果如圖6 所示。

圖6 2018 年就業率、專業相關度和就業滿意度統計可視化

采用極坐標系式的柱狀圖展示2018 年各學院的畢業生平均就業薪資情況。扇形柱狀在極坐標的高低位置比較，清晰表達各個學院就業薪資相對其他學院的情況，效果如圖7 所示。

圖7 2018 年畢業生就業薪資統計可視化

采用折線圖展示2018 年畢業生就業去向情況，折線圖可以更好地反映畢業去向的趨勢，效果如圖8所示。

圖8 2018 年畢業生就業去向統計可視化

4 平臺效果分析

從上述平臺實現的效果來看，本文平臺主要功能由后臺和前臺2 部分組成。其中，后臺主要為平臺管理員提供曲靖師范學院各年招生就業數據動態監測和管理的窗口，平臺管理員可以根據前臺數據可視化展示的需求，將曲靖師范學院招生就業管理系統中各年的招生就業數據動態的導入到數據可視化平臺的后臺數據庫；前臺主要為普通用戶和校內教學管理用戶提供數據可視化查詢的窗口，不同的用戶可以從自己的觀察角度出發，方便地在前臺單擊各類圖表直觀的查看到自己所需要的數據。除這些基本功能之外，前臺的各類圖表中還直觀地反映了一些數據之間的規律。如：以2018 年的狀態數據為例，通過查看招生情況統計圖表不難發現，該校的招生主要以云南省內生源為主，少量招收了山西、湖南、河南等地的生源，招生覆蓋面相對較窄；通過查看畢業生的就業率、就業時與專業的相關度、就業薪資、就業去向等統計圖表不難發現，該校學生對就業的滿意度普遍不高，數值為40%～60%。圖表中展示的這些數據規律和該校是西部云南地區的一所地方普通本科師范院校的實際情況基本吻合，表明該數據可視化分析平臺向用戶展示的情況與本校的實際情況相符，為用戶了解本校的教育質量數據窗口真實可靠，具有一定的參考價值。

5 結語

本文以曲靖師范學院2018 年的招生就業數據為基礎，基于Servlet、JSON、ECharts 等相關技術實現了一個基于B/S 架構的Web 高校教學數據狀態可視化分析平臺，該平臺可以為用戶查詢高校的教學狀態數據提供數據可視化的視覺窗口，同時可以通過圖表的形式向用戶直觀的展示數據內部的一些潛在含義，進一步為用戶正確了解高校的教育質量提供具有一定參考價值的可視化數據支持。但是，本文由于篇幅所限，平臺展示的數據僅以曲靖師范學院2018 年的招生就業數據為例，平臺效果分析中的數據規律具有一定的局限性。因此，下一步的研究方向是進一步將本平臺推廣應用于能夠體現高校教師師資水平的科研狀態數據、課程教學狀態數據等更多數據內容的可視化分析與展示，以便能夠用更多的數據向用戶更加全面地展示高校的教育質量水平以及數據內部隱含的一些更有參考價值的真實含義。