《动态网页设计》课程HighCharts数据可视化教学设计

杨士卿

摘要：《动态网页设计》是计算机相关专业的一门必修课程，Highcharts应用是该课程中实践扩展部分。学习Highcharts有益于动态网页设计的学习者掌握Web中交互图表绘制，使动态网页技能更好地与企业接轨。基于迪克与凯里教学设计的系统化方法模型，对Highcharts数据可视化技能培训进行教学系统化设计，有利于学习者快速掌握该技能。

关键词：Highcharts；数据可视化；教学设计

中图分类号：G434 文献标识码：A 文章编号：1009-3044（2018）14-0165-03

Highcharts是由Highsoft AS公司2009年开发的一款开源的Javascript图标库，能够无需插件地在网站或Web应用程序中添加交互性图表，目前已被IBM、Microsoft、Facebook等多家大型企业应用，在我国企业中也应用广泛。计算机相关专业中开设的《动态网页设计》课程将Highcharts作为实践拓展部分，为使学习者更好地掌握该技能，本文将对Highcharts数据可视化技能培训进行教学系统化设计。教学设计遵从迪克与凯里教学设计的系统化方法模型，该模型把教学看作是一个过程系统，并且非常重视学习情境与新技能之间的关系[1]。模型图如图1所示：

1 评价需求，确定目标

1.1 需求分析

数据可视化是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息更加直观地展现出来[2]。Highcharts是一款应用广泛的Javascript图表库[3]。《动态网页设计》的学习者已掌握相关HTML+CSS知识和后台开发技术，Javascript技能相对薄弱。在实践活动开展之前，将对学习者进行Highcharts培训。

1.2 绩效分析

我们期望学习者能够对Highcharts进行配置，能够使用Highcharts绘制简单的单图表和复杂的混合图表和数据标示等，满足实践中对数据可视化图表的需求。目前学习者Javascript基础薄弱，并且没有接触过Highcharts，对其工作原理没有了解，但是具有基本的编程素養，因此此时进行培训能够促使学习者快速掌握Highcharts图表绘制。

1.3 确定目标

学习者通过本次培训后，能够补上相关Javascript的基础知识，以便于在Highcharts中理解并应用；通过对Highcharts的学习，能够确定并顺序化完成目的所需要的主要步骤；能够将数据格式化成Highcharts所需要的格式；能够完成对Highcharts的配置；能够根据需求绘制各类图表，并能够在出现错误时分析调试错误。

2 学习者和环境分析

2.1 学习者分析

本教学设计的学习者为计算机相关专业的大二学生，通过访谈和观察发现，学习者在《动态网页设计》课程中有了一定的HTML和CSS基础，编写过简单的页面，了解相关语法规则。但是Javascript基础薄弱，通过培训可以使学习者快速学会该技能。学习动机方面，从ARCS模型分析[4]，目前数据可视化是一项国内外均发展火爆的技术，学习者乐于学习一门实现数据可视化的技能（A注意）；作为计算机相关专业的学生，大数据可视化和学习者息息相关（B关联）；学习者希望并有信心在已有的知识基础上学会一个更美观、可交互的可视化图表工具Highcharts（C信心）；通过交流发现学习者认为学习Highcharts是应用价值的，可以在学习中获得满足（S满意）。

2.2 学习环境分析

HighCharts数据可视化安排在《动态网页设计》实践拓展部分，相对正式课程，学习氛围较为轻松，学习地点在上课的机房，能够提供满足教学要求的软硬件支持。

3 编写绩效目标

本次教学最终的教学目的是学生学会使用Highcharts完成数据可视化图表绘制。绩效目标包括HTML和CSS知识回顾、Highcharts基本图表配置与绘制、数据处理、复杂图表绘制与动态图表绘制、图表美化等多项内容。这里以Highcharts基本图表配置与绘制为例，画出从属技能与入门技能分析图（如图2所示），并根据从属技能编写绩效目标图表（如表2所示）。

4 开发评测量表

学习者上机部分需要做以下工作：

（1）在指定位置（E盘下），新建项目文件夹，命名为MyProject。

（2）在项目文件夹下新建HTML网页文件，命名为index.html。

（3）在项目文件夹中放入jQuery文件和Highcharts文件。

（4）在网页文件中引用jQuery和Highcharts的文件。

（5）配置Highcharts，编辑JS，通过直接数组传入数据，实现规定的条形图，并按要求配置图表格式。

（6）在浏览器中打开调试面板，进行参数的调试。如果有错误不能正常显示，查看并调试错误。

针对上机部分的核查表如表2所示。

5 开发教学策略

教学活动设计如表3所示。

6 开发教学材料

由于本案例需要完成由基础知识到新知识的快速过渡，所以会选择根据需求开发教学材料，教学材料将涵盖Highcharts学习所必要、必备的知识点。根据从属技能，逐一开发教学材料。

7 设计并实施形成性评价与总结性评价

以主要绩效目标“知道Highcharts支持的图表类型，能够画出Highcharts支持的各种单项图表”为例，设计态度问卷，分为六个部分，四个部分根据ARCS模型，包括注意力、相关性、自信心和满意度，一部分是让学习者为教学的清晰度打分，最后一部分要求学习者就教学的优缺点从他们的角度谈谈看法。并鼓励学习者对表格中没有罗列的其他教学方面进行评论。

8 总结

本教学设计根据计算机相关专业的专业课程特点，根据迪克与凯里教学设计的系统化方法模型进行利用Highcharts进行数据可视化的培训，帮助学习者快速掌握该项技能。

参考文献：

[1] 迪克. 教学系统化设计[M]. 高等教育出版社， 2004.

[2] NathanYau， 向怡宁. 鲜活的数据：数据可视化指南[M]. 人民邮电出版社， 2012.

[3] 马琰钢， 邓闯. 基于Highcharts的浙江天气网数据统计分析平台开发[J]. 数字技术与应用， 2015（11）：168-168.

[4] 刘爽， 郑燕林， 阮士桂. ARCS模型视角下微课程的设计研究[J]. 中国电化教育， 2015（2）：51-56.