基于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插件，将可视化的平台呈现出来。通过对学生成绩的筛选，了解学生的学习情况，教师可以根据具体情况随时调整教学方法，达到更好的教学效果。事实证明，数据可视化平台可以满足多学科的研究及教学的应用目的，为教学实践提供了一种新的便捷的可视化交互途径。