楊士卿

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

關(guān)鍵詞：Highcharts；數(shù)據(jù)可視化；教學(xué)設(shè)計(jì)

中圖分類號(hào)：G434 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）14-0165-03

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

1 評(píng)價(jià)需求，確定目標(biāo)

1.1 需求分析

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

1.2 績效分析

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

1.3 確定目標(biāo)

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

2 學(xué)習(xí)者和環(huán)境分析

2.1 學(xué)習(xí)者分析

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

2.2 學(xué)習(xí)環(huán)境分析

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

3 編寫績效目標(biāo)

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

4 開發(fā)評(píng)測量表

學(xué)習(xí)者上機(jī)部分需要做以下工作：

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

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

（3）在項(xiàng)目文件夾中放入jQuery文件和Highcharts文件。

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

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

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

針對(duì)上機(jī)部分的核查表如表2所示。

5 開發(fā)教學(xué)策略

教學(xué)活動(dòng)設(shè)計(jì)如表3所示。

6 開發(fā)教學(xué)材料

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

7 設(shè)計(jì)并實(shí)施形成性評(píng)價(jià)與總結(jié)性評(píng)價(jià)

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

8 總結(jié)

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

參考文獻(xiàn)：

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

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

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

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