基于MVC的教學數據可視化平臺研究

付曉倩，劉志強，劉曉靜

（青海大學計算機技術與應用系，西寧 810016）

0 引言

數據可視化技術是指利用計算機圖形學和圖像處理技術，將數據轉化為圖形或圖像顯示在屏幕上，并進行交互處理的理論、方法和技術[1-2]。友好的用戶界面是平臺搭建的關鍵，MVC（Model-View-Controller）是隨著Smalltalk Language語言的發展提出的，是一個著名的用戶界面設計架構。基于MVC框架，結合數據可視化插件ECharts及相應的Microsoft包開發設計友好且趣味十足的用戶界面，簡潔的后臺界面，不同用戶權限的數據庫安全性設計，將Access多次成績進行整體或局部可視化分析，同時分析知識點的掌握情況，方便教師調整教學計劃，學生加強該方面知識學習。

1 平臺開發背景及意義

目前，各大高校普遍存在以下現象：任課教師與學生除了在課堂上授業解惑之外，學生很少跟教師進行課外交流，對于教師而言，了解每個學生的學習情況和背景信息，需要花費太大的時間和精力，因此亟待開發一個可視化的數據展示平臺，來有效地呈現學生的學習情況。

本平臺運用MVC框架，在可視化平臺上開發可以面向教學使用的輔助平臺，使得教師可以及時知道各班學生對知識點的掌握情況[3]，并對學生薄弱的環節給予更多的幫助。教學輔助平臺能夠使教學應用更加合理有效，取得更好的教學效果。

2 平臺開發技術

MVC框架是將一個應用的輸入、處理、輸出流程分離為Model、View、Controller三個部分。簡化軟件開發的復雜度，實現數據層與表示層的分離，撰寫出更模塊化且可維護性更高的代碼。其中Model代表模型，用來定義信息的格式及信息訪問的界面。View表示視圖，負責用戶界面的數據展示。Controller為控制器，控制系統的運行的流程以及與瀏覽器的交互和響應客戶端的要求等[4]。MVC之所以應用廣泛，是因為對于一個已經提過需求的系統來說，由于程序的高耦合性，新的用戶需求會使得項目改動異常困難，而使用MVC框架設計開發平臺時，將開發過程切割為三個部分，在設計階段可以降低一定程度的耦合性，是一個靈活性很高、擴展性很強的平臺搭建框架。圖1所示顯示了Model、View、Controller之間的相互關系及與數據庫和服務器的關系。

圖1 Web中的MVC框架

ECharts是Enterprise Charts的縮寫，是由國內百度公司開發并開源的商業級數據圖表技術，支持眾多的瀏覽器，并能夠在移動設備的瀏覽器中流暢運行[5]。它可以提供豐富的數據可視化圖表，每種類型的數據可視化圖表又有多種實現效果。ECharts提供組件和混搭技術，支持個性化圖表定制。

3 系統功能設計

基于MVC框架，結合數據可視化的前沿技術，進一步整理開發了常用圖表的數據可視化開發庫和基于圖的數據可視化分析開發庫[6]。在可視化平臺之上開發可以面向各大高校教師以及學生的網站，為之提供了一個簡潔美觀的平臺。

本平臺分別設置了對應教師和學生的接口，師生可以隨時查看每一次的成績，并下載成績展示圖，通過成績展示圖得知各知識點的掌握情況，輔助指導學生調整學習重點或學習方法，同時為教師改進教學方法提供教學數據依據，以期達到不斷改進學習效果、趨近學習目標的目的。

根據用戶的權限不同，教師模塊分為兩個部分：課程組組長（管理員）和課程組教師。兩者最主要的區別就在于只有課程組組長可以上傳成績，并在上傳過程中選擇知識點和課程科目。課程組組長可以查看任何一個班級的成績，而課程組普通教師只能查看當前所教班級的成績。課程組教師在查看成績的時候，可以選擇學生的成績分段統計表，若發現某個知識點的分數相較其他知識點低，那么教師有必要再對此知識點進行更多的教學或輔導，從而做到因材施教，達到更好的教學效果[7-8]。圖2所示為整個平臺的系統功能結構圖。

圖2 平臺的系統功能結構圖

4 數據可視化平臺設計

研究發現，用圖形和表格代替關鍵數據的呈現，對用戶的記憶力有很大提升，尤其是具有顯著吸引力的圖表。圖形色彩也能幫助用戶提高對數據的記憶，學習者往往能夠記住一個配有突出顏色和色調的圖形[9]。在學習過程中，學習者能夠記住一些具有吸引力的圖形，而對簡單普通的圖形沒有印象。在顯示學生成績模塊，設置了可以用兩種方式呈現數據，即柱狀圖和折線圖，可以選擇任何一種你認為更直觀的方式去查看成績。

此外，為了增加平臺的吸引性，提高學生觀察平臺數據過程中的注意力，鼓勵學生們形成良好的競爭，使數據更好地為其所用，平臺從趣味性下手，在學生部分特別設計了個性功能：看一看你在學校的地位、測一測你在學校的緣分。前者是指可以通過一系列的數據得出來成績等級，此處的等級名稱借鑒了學生受眾較多的熱門游戲——王者榮耀的排位設計，降低學生對學習的抵觸感，增加平臺親切性，界面如圖3所示；后者是列出全校成績和當前登錄學生的成績一致的人數，從感官上刺激并增加學生的競爭心理，間接提高其學習的主動性和投入度。

5 平臺應用與實踐

在教學應用實踐中，圖表可視化發揮了較大的作用，利用基本圖形的動畫可視化模板以及圖表的可視化模板，輸入相應的數據，做出展示數據可視化的應用作品[10]。本平臺對于學生和教師的查看功能類似，本章節以學生查看為例，介紹平臺對于可視化的應用和呈現。

學生成績的可視化使用ECharts插件實現，可以用不同的格式呈現出來。該學生Access課程考試成績使用柱狀圖表示為：第一次（90分），第二次（80分），第三次（63.3分），第四次（100分），如圖4所示，亦可以采用折線圖呈現出來，如圖5所示。圖中紅色實心部分代表該學生該課程的每次考試成績，虛線為平均分（83.53分），滿分設置為百分制。

圖4 直方圖呈現學生成績

圖5 折線圖呈現學生成績

從上述兩幅圖中得知，第三次考試相較其他考試，分數明顯低處很多，為了驗證此情況的原因，分析推測是否是某個知識點掌握不到位。故選擇該科目中的一個知識點，得知該學生Access課程關于數據庫基礎知識的考試成績為：第一次（100分），第二次（100分），第三次（50分），第四次（100分），如圖6所示。圖中紅色實線代表該學號學生該知識點的掌握情況，虛線為平均分（87.5分），滿分設置為百分制。

圖6 關于數據庫基礎知識考試成績

因此可以得知，這次本學生的考試成績較好，證明此知識點掌握較好，進而可以去查看一下其他知識點的成績圖，找到知識點薄弱的環節，更好更快地提高自身成績。

教師亦可以通過此方法找到學生相對較差的部分，此平臺對于學生來說，可以及時知道自己的不足，對于教師來說，也可以更直接地看到學生的劣勢所在，至此，兩者再有針對性地進行改正，制定個性化學習和施教方案，有針對性地彌補不足，適時調整學習方法和側重點，優化調整施教方案[11]。

6 結語

本文通過調研普通高校課程教學的現狀，設計實現了教學數據的可視化平臺。利用MVC框架和圖表表示工具ECharts插件，將可視化的平臺呈現出來。通過對學生成績的篩選，了解學生的學習情況，教師可以根據具體情況隨時調整教學方法，達到更好的教學效果。事實證明，數據可視化平臺可以滿足多學科的研究及教學的應用目的，為教學實踐提供了一種新的便捷的可視化交互途徑。