Highcharts在實(shí)踐教學(xué)場(chǎng)所預(yù)約登記系統(tǒng)中的應(yīng)用

張福轉(zhuǎn)+王偉

摘要：Highcharts是目前在web應(yīng)用程序中使用最廣泛的圖表控件之一，結(jié)合系統(tǒng)統(tǒng)計(jì)模塊的功能需求將其引用過(guò)來(lái)，較好地解決了系統(tǒng)數(shù)據(jù)統(tǒng)計(jì)表格不直觀的缺陷。分析Highcharts特點(diǎn)以及屬性配置方法，依據(jù)系統(tǒng)架構(gòu)給出了關(guān)鍵技術(shù)及部分代碼。最后對(duì)統(tǒng)計(jì)模塊的運(yùn)用作了總結(jié)。

關(guān)鍵詞：Highcharts圖表；ASP；jQuery；系統(tǒng)應(yīng)用

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）10-0111-02

1 背景

基于B/S模式實(shí)踐場(chǎng)所預(yù)約登記系統(tǒng)能夠滿足院校教員在教學(xué)場(chǎng)所空閑情況下預(yù)約申請(qǐng)完成實(shí)踐教學(xué)，該系統(tǒng)使用方便、快捷，教學(xué)預(yù)約登統(tǒng)計(jì)及時(shí)準(zhǔn)確，在我院教學(xué)實(shí)踐保障中起到重要作用。而教學(xué)保障統(tǒng)計(jì)模塊是該系統(tǒng)重要組成部分，由于實(shí)踐教學(xué)場(chǎng)所復(fù)雜，預(yù)約授課教員多，使用各類統(tǒng)計(jì)表格形式存在很多缺點(diǎn)，需要將這些數(shù)據(jù)需要圖表形式直觀反映出來(lái)。本文重點(diǎn)介紹Highcharts圖表庫(kù)在實(shí)踐場(chǎng)所預(yù)約登記系統(tǒng)統(tǒng)計(jì)模塊中的應(yīng)用和實(shí)現(xiàn)方法。

2 Highcharts簡(jiǎn)介

2.1什么是Highcharts

它是一個(gè)用純javascipt編寫的圖表庫(kù)，能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序中添加交互性各式圖表。由于使用純javascript腳本編寫，所以不需要像Flash和Java那樣需要插件才可以運(yùn)行，采用SVG（Scalable Vector Graphics）可縮放矢量圖形技術(shù)開(kāi)發(fā)，提高了渲染速度提升了用戶體驗(yàn)。

2.2 Highcharts的特點(diǎn)

首先Highcharts不受編程語(yǔ)言約束：它可以在大多數(shù)的web程序中開(kāi)發(fā)和使用，并且對(duì)個(gè)人用戶而言，支持asp、php、java、.net等多種語(yǔ)言使用；其次Highcharts具有提示和圖表縮放功能：由其生成的圖表中可以設(shè)置在數(shù)據(jù)上顯示提示效果。還可以在大數(shù)量數(shù)據(jù)顯示時(shí)放大某部分圖形，有了圖表的縮放，用戶能夠更方便查看圖表數(shù)據(jù)；再次Highcharts支持外部數(shù)據(jù)加載和數(shù)據(jù)動(dòng)態(tài)性：支持多種數(shù)據(jù)形式，可以是javascript數(shù)組，json文件，json對(duì)象和表格數(shù)據(jù)等，數(shù)據(jù)的來(lái)源可以是本地，不同系統(tǒng)頁(yè)面甚至是不同網(wǎng)站。結(jié)合Jquery，Prototype等javascript框架提供的Ajax接口，可以實(shí)時(shí)地從服務(wù)器取得數(shù)據(jù)并實(shí)時(shí)刷新圖表。

3 Highcharts在實(shí)踐場(chǎng)所預(yù)約登記系統(tǒng)中應(yīng)用

3.1 系統(tǒng)結(jié)構(gòu)和文件代碼

實(shí)踐教學(xué)場(chǎng)所預(yù)約登記系統(tǒng)是基于Browser/Server模式設(shè)計(jì)，后臺(tái)服務(wù)器文件采用asp語(yǔ)言開(kāi)發(fā)，服務(wù)器數(shù)據(jù)庫(kù)為Access。數(shù)據(jù)統(tǒng)計(jì)模塊是該系統(tǒng)重要模塊之一，在模塊中嵌入了Highcharts圖表庫(kù)，能夠方便直觀地查看各類實(shí)踐場(chǎng)所使用量。數(shù)據(jù)庫(kù)統(tǒng)計(jì)模塊表名為“tongji”，如表1所示：

后臺(tái)服務(wù)器統(tǒng)計(jì)數(shù)據(jù)文件json.asp 文件放在系統(tǒng)根目錄下。運(yùn)行該文件時(shí)能夠自動(dòng)讀取數(shù)據(jù)庫(kù)統(tǒng)計(jì)表“tongji”產(chǎn)生json數(shù)據(jù)，以備Highcharts圖表加載。由于Highcharts采用utf-8標(biāo)準(zhǔn)編寫，為避免發(fā)生錯(cuò)誤沖突，在json.asp中使用CODEPAGE="65001"。部分代碼如下：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

…

<% dim a

a=true

response.write "["

sqltext="select * from tongji"

setrs=conn.execute（sqltext）

do while not rs.eof

if a=true then

response.write"["""&rs（"changsuo"）&"""，"&rs（"xueshi"）&"]"

else response.write"，["""&rs（"changsuo"）&"""，"&rs（"xueshi"）&"]"

end if

a=false

rs.movenext

loop

response.write "]"

%>

3.2 Highcharts應(yīng)用方法

首先在網(wǎng)站http：//www.highcharts.com/免費(fèi)下載Highcharts，解壓后Highcharts圖表庫(kù)下包括example、gfx、js、graphics、exporting-server五個(gè)文件夾。該系統(tǒng)統(tǒng)計(jì)模塊使用jQuery作為基本框架處理javascript任務(wù)，可將jquery、Highcharts庫(kù)文件夾都放在系統(tǒng)根目錄下，在使用Highcharts前，需要在頁(yè)面頭部引用這些腳本文件，Highcharts圖表代碼可放在head或body中。依據(jù)設(shè)置的屬性先生成一個(gè)名為chart、類型為clumn-rotated-labels圖表，并把圖表渲染到div層id為“container”中。使用jQuery庫(kù)的getJSON（）方法加載系統(tǒng)內(nèi)json.asp文件，把json數(shù)據(jù)賦值給Highchart圖表chart。統(tǒng)計(jì)功能文件代碼如下：

4運(yùn)行演示

系統(tǒng)成功運(yùn)行統(tǒng)計(jì)模塊后的實(shí)踐教學(xué)場(chǎng)所保障統(tǒng)計(jì)column-rotated-labels表2如下：

5結(jié)束語(yǔ)

本文利用Highcharts圖表庫(kù)結(jié)合jQuery技術(shù)在系統(tǒng)中創(chuàng)建了直觀的數(shù)據(jù)統(tǒng)計(jì)圖，能夠方便教學(xué)保障人員及機(jī)關(guān)領(lǐng)導(dǎo)瀏覽查看統(tǒng)計(jì)數(shù)據(jù)，對(duì)實(shí)踐場(chǎng)所教學(xué)保障和建設(shè)有具指導(dǎo)意義。這里只是簡(jiǎn)單表述了Highcharts加載外部json數(shù)據(jù)生成圖表，功能簡(jiǎn)單還不夠完善，后期可以進(jìn)行更改和添加日期控件，進(jìn)行多條件復(fù)合查詢，滿足任何不同用戶的多種需求。隨著Highchart本身技術(shù)的發(fā)展，相信讀者通過(guò)不斷深入研究，一定能夠創(chuàng)造出更加實(shí)用精美的圖表。

參考文獻(xiàn)：

[1] Highcharts Demo[EB/OL].http：//www.highcharts.com/.

[2] 張固，汪曉平.ASP網(wǎng)絡(luò)應(yīng)用系統(tǒng)典型模塊開(kāi)發(fā)實(shí)例解析[M].北京：人民郵電出版社，2004.

[3] 比伯奧特，卡茨. jQuery實(shí)戰(zhàn)[M]. 陳寧，譯.北京： 人民郵電出版社，2009.