《動態(tài)網(wǎng)頁設計》課程HighCharts數(shù)據(jù)可視化教學設計

楊士卿

摘要：《動態(tài)網(wǎng)頁設計》是計算機相關專業(yè)的一門必修課程，Highcharts應用是該課程中實踐擴展部分。學習Highcharts有益于動態(tài)網(wǎng)頁設計的學習者掌握Web中交互圖表繪制，使動態(tài)網(wǎng)頁技能更好地與企業(yè)接軌?；诘峡伺c凱里教學設計的系統(tǒng)化方法模型，對Highcharts數(shù)據(jù)可視化技能培訓進行教學系統(tǒng)化設計，有利于學習者快速掌握該技能。

關鍵詞：Highcharts；數(shù)據(jù)可視化；教學設計

中圖分類號：G434 文獻標識碼：A 文章編號：1009-3044（2018）14-0165-03

Highcharts是由Highsoft AS公司2009年開發(fā)的一款開源的Javascript圖標庫，能夠無需插件地在網(wǎng)站或Web應用程序中添加交互性圖表，目前已被IBM、Microsoft、Facebook等多家大型企業(yè)應用，在我國企業(yè)中也應用廣泛。計算機相關專業(yè)中開設的《動態(tài)網(wǎng)頁設計》課程將Highcharts作為實踐拓展部分，為使學習者更好地掌握該技能，本文將對Highcharts數(shù)據(jù)可視化技能培訓進行教學系統(tǒng)化設計。教學設計遵從迪克與凱里教學設計的系統(tǒng)化方法模型，該模型把教學看作是一個過程系統(tǒng)，并且非常重視學習情境與新技能之間的關系[1]。模型圖如圖1所示：

1 評價需求，確定目標

1.1 需求分析

數(shù)據(jù)可視化是指將結(jié)構(gòu)或非結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換成適當?shù)目梢暬瘓D表，然后將隱藏在數(shù)據(jù)中的信息更加直觀地展現(xiàn)出來[2]。Highcharts是一款應用廣泛的Javascript圖表庫[3]?！秳討B(tài)網(wǎng)頁設計》的學習者已掌握相關HTML+CSS知識和后臺開發(fā)技術，Javascript技能相對薄弱。在實踐活動開展之前，將對學習者進行Highcharts培訓。

1.2 績效分析

我們期望學習者能夠?qū)ighcharts進行配置，能夠使用Highcharts繪制簡單的單圖表和復雜的混合圖表和數(shù)據(jù)標示等，滿足實踐中對數(shù)據(jù)可視化圖表的需求。目前學習者Javascript基礎薄弱，并且沒有接觸過Highcharts，對其工作原理沒有了解，但是具有基本的編程素養(yǎng)，因此此時進行培訓能夠促使學習者快速掌握Highcharts圖表繪制。

1.3 確定目標

學習者通過本次培訓后，能夠補上相關Javascript的基礎知識，以便于在Highcharts中理解并應用；通過對Highcharts的學習，能夠確定并順序化完成目的所需要的主要步驟；能夠?qū)?shù)據(jù)格式化成Highcharts所需要的格式；能夠完成對Highcharts的配置；能夠根據(jù)需求繪制各類圖表，并能夠在出現(xiàn)錯誤時分析調(diào)試錯誤。

2 學習者和環(huán)境分析

2.1 學習者分析

本教學設計的學習者為計算機相關專業(yè)的大二學生，通過訪談和觀察發(fā)現(xiàn)，學習者在《動態(tài)網(wǎng)頁設計》課程中有了一定的HTML和CSS基礎，編寫過簡單的頁面，了解相關語法規(guī)則。但是Javascript基礎薄弱，通過培訓可以使學習者快速學會該技能。學習動機方面，從ARCS模型分析[4]，目前數(shù)據(jù)可視化是一項國內(nèi)外均發(fā)展火爆的技術，學習者樂于學習一門實現(xiàn)數(shù)據(jù)可視化的技能（A注意）；作為計算機相關專業(yè)的學生，大數(shù)據(jù)可視化和學習者息息相關（B關聯(lián)）；學習者希望并有信心在已有的知識基礎上學會一個更美觀、可交互的可視化圖表工具Highcharts（C信心）；通過交流發(fā)現(xiàn)學習者認為學習Highcharts是應用價值的，可以在學習中獲得滿足（S滿意）。

2.2 學習環(huán)境分析

HighCharts數(shù)據(jù)可視化安排在《動態(tài)網(wǎng)頁設計》實踐拓展部分，相對正式課程，學習氛圍較為輕松，學習地點在上課的機房，能夠提供滿足教學要求的軟硬件支持。

3 編寫績效目標

本次教學最終的教學目的是學生學會使用Highcharts完成數(shù)據(jù)可視化圖表繪制?？冃繕税℉TML和CSS知識回顧、Highcharts基本圖表配置與繪制、數(shù)據(jù)處理、復雜圖表繪制與動態(tài)圖表繪制、圖表美化等多項內(nèi)容。這里以Highcharts基本圖表配置與繪制為例，畫出從屬技能與入門技能分析圖（如圖2所示），并根據(jù)從屬技能編寫績效目標圖表（如表2所示）。

4 開發(fā)評測量表

學習者上機部分需要做以下工作：

（1）在指定位置（E盤下），新建項目文件夾，命名為MyProject。

（2）在項目文件夾下新建HTML網(wǎng)頁文件，命名為index.html。

（3）在項目文件夾中放入jQuery文件和Highcharts文件。

（4）在網(wǎng)頁文件中引用jQuery和Highcharts的文件。

（5）配置Highcharts，編輯JS，通過直接數(shù)組傳入數(shù)據(jù)，實現(xiàn)規(guī)定的條形圖，并按要求配置圖表格式。

（6）在瀏覽器中打開調(diào)試面板，進行參數(shù)的調(diào)試。如果有錯誤不能正常顯示，查看并調(diào)試錯誤。

針對上機部分的核查表如表2所示。

5 開發(fā)教學策略

教學活動設計如表3所示。

6 開發(fā)教學材料

由于本案例需要完成由基礎知識到新知識的快速過渡，所以會選擇根據(jù)需求開發(fā)教學材料，教學材料將涵蓋Highcharts學習所必要、必備的知識點。根據(jù)從屬技能，逐一開發(fā)教學材料。

7 設計并實施形成性評價與總結(jié)性評價

以主要績效目標“知道Highcharts支持的圖表類型，能夠畫出Highcharts支持的各種單項圖表”為例，設計態(tài)度問卷，分為六個部分，四個部分根據(jù)ARCS模型，包括注意力、相關性、自信心和滿意度，一部分是讓學習者為教學的清晰度打分，最后一部分要求學習者就教學的優(yōu)缺點從他們的角度談談看法。并鼓勵學習者對表格中沒有羅列的其他教學方面進行評論。

8 總結(jié)

本教學設計根據(jù)計算機相關專業(yè)的專業(yè)課程特點，根據(jù)迪克與凱里教學設計的系統(tǒng)化方法模型進行利用Highcharts進行數(shù)據(jù)可視化的培訓，幫助學習者快速掌握該項技能。

參考文獻：

[1] 迪克. 教學系統(tǒng)化設計[M]. 高等教育出版社， 2004.

[2] NathanYau， 向怡寧. 鮮活的數(shù)據(jù)：數(shù)據(jù)可視化指南[M]. 人民郵電出版社， 2012.

[3] 馬琰鋼， 鄧闖. 基于Highcharts的浙江天氣網(wǎng)數(shù)據(jù)統(tǒng)計分析平臺開發(fā)[J]. 數(shù)字技術與應用， 2015（11）：168-168.

[4] 劉爽， 鄭燕林， 阮士桂. ARCS模型視角下微課程的設計研究[J]. 中國電化教育， 2015（2）：51-56.