基于Web的数据可视化工具设计与实现

发布时间：2018-04-02 10:02

本文选题：教育信息化　切入点：数据可视化　出处：《华中师范大学》2017年硕士论文

【摘要】：大数据正改变着社会的方方面面,教育也不例外,越来越多的教育数据被收集和存储,教育领域已经步入了教育大数据时代。如何快速、便捷展示和分析教育数据成为普通教育工作者面临的一个问题。数据可视化可将抽象的数据转换为形象的图表,利于数据特点和规律的发掘,因而将数据可视化技术应用于教育领域,服务于普通教育工作者具有重要意义。但是普通教育工作者缺乏专业的数据可视化知识和技能,方便易用的数据可视化工具便成为迫切需要。本文首先梳理了数据可视化的研究现状及其在教育中的应用现状,在此基础之上对工具进行了详细的需求分析,着重阐述了功能需求和业务流程。然后,根据需求分析对工具进行了设计,重点对前端的设计模式进行了思考,确定了 MVVM设计模式及其衍生的前端视图模型。其次,对工具进行了实现,针对数据可视化图表的封装、交互以及导入特殊数据类型三个关键技术问题提出了解决对策。通过AngularJS指令技术和JavaScript闭包技术实现了图表的封装,使用D3.js人机交互技术实现了图表的交互,通过在视图模型中采用双数组结构实现了网状和层次数据基于表格的导入和展示。最后,对工具进行了功能和性能测试,测试结果表表明工具运行正常、功能稳定,达到了设计目标。本文采用AngularJS框架、表格插件Handsometable、数据可视化绘图库Echarts和D3.js设计和实现了一款Web数据可视化工具。该工具操作简单、支持数据类型丰富,满足了教师、学生、教育管理者等人员可视化基本教育数据的需求,为今后此类数据可视化工具的开发提供了参考。
[Abstract]:Big data is changing all aspects of society, and education is no exception. More and more educational data have been collected and stored. The field of education has entered the era of educational big data. How to quickly, The convenient display and analysis of educational data has become a problem faced by ordinary educators. Data visualization can transform abstract data into graphic charts, which is conducive to exploring the characteristics and laws of the data. Therefore, it is of great significance to apply data visualization technology to the field of education and to serve the general educators, but the general educators lack the professional knowledge and skills of data visualization. The convenient and easy to use data visualization tools become an urgent need. Firstly, this paper combs the research status of data visualization and its application in education, and then makes a detailed demand analysis of the tools. Then, according to the requirement analysis, the tool is designed, the design pattern of the front end is considered, and the MVVM design pattern and its derived front view model are determined. The implementation of the tool is carried out, and the solutions to the three key technical problems of data visualization chart encapsulation, interaction and importing special data type are put forward. The encapsulation of the chart is realized by AngularJS instruction technology and JavaScript closure technology. D3.js human-computer interaction technology is used to realize the graph interaction, and the grid and hierarchical data are imported and displayed based on table by using double array structure in the view model. Finally, the function and performance of the tool are tested. The test results show that the tool runs normally, functions stably and achieves the design goal. In this paper, a Web data visualization tool is designed and implemented by using AngularJS framework, table plug-in Handsometable. data visualization drawing library Echarts and D3.js. The data types are abundant and meet the needs of teachers, students, education administrators and other personnel to visualize basic educational data, which provides a reference for the development of such data visualization tools in the future.
【学位授予单位】：华中师范大学
【学位级别】：硕士
【学位授予年份】：2017
【分类号】：TP393.09;G434

【参考文献】