周嵐

摘 要：Highcharts目前在web應(yīng)用程序開(kāi)發(fā)中被廣泛使用，可以為我們實(shí)現(xiàn)交互性的圖表開(kāi)發(fā)，本文通過(guò)分析Highcharts的特點(diǎn)，結(jié)合成績(jī)管理系統(tǒng)，首先給出了成績(jī)查詢統(tǒng)計(jì)流程圖，然后有效地實(shí)現(xiàn)了成績(jī)動(dòng)態(tài)統(tǒng)計(jì)分析功能，文章給出設(shè)計(jì)思路、流程圖、部分關(guān)鍵代碼和系統(tǒng)運(yùn)行效果，并進(jìn)行了總結(jié)，提出了希望。

關(guān)鍵詞：Highcharts；圖表；動(dòng)態(tài)統(tǒng)計(jì)

中圖分類(lèi)號(hào)：TP311.11 文獻(xiàn)標(biāo)識(shí)碼：A

1 引言（Introduction）

在成績(jī)管理系統(tǒng)中，成績(jī)分析是系統(tǒng)中最重要的組部分和最主要的環(huán)節(jié)。教師和管理人員通過(guò)它[1]，找出教學(xué)中存在的問(wèn)題。

圖表是用來(lái)呈現(xiàn)某事物或某信息數(shù)據(jù)的發(fā)展趨勢(shì)的圖形[2]。比如，一些圖表可以反映出學(xué)生考試成績(jī)?cè)诓煌謹(jǐn)?shù)段的人數(shù)情況；一些圖表可以反映出會(huì)員購(gòu)物積分的情況；一些圖表可以反映出某一地區(qū)在不同季節(jié)溫度的變化情況?？傊?，在各個(gè)領(lǐng)域中，我們總喜歡用圖表去說(shuō)明情況，因?yàn)檫@樣更形象、更直觀、更容易被理解的承現(xiàn)出當(dāng)時(shí)的狀況以及狀況之間的差異。在互聯(lián)網(wǎng)的時(shí)代[3]，圖表更是無(wú)處不再的出現(xiàn)在我們的屏幕上，量化了我們生活的方方面面。能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序中添加有交互性的圖表，是程序開(kāi)發(fā)人員必須掌握的一種技能。

2 HighCharts簡(jiǎn)介（A brief introduction to highcharts）

2.1 什么是HighCharts

Highcharts是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù)，可以幫助我們簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序?qū)崿F(xiàn)有交互性的圖表[4]。它采用SVG（Scalable Vector Graphics）可縮放矢量圖形技術(shù)開(kāi)發(fā)，提高了渲染速度提升了用戶體驗(yàn)。并且，HighChart支持的圖表類(lèi)型眾多，有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖、3D圖、熱點(diǎn)圖、樹(shù)狀圖、動(dòng)態(tài)圖表、組合圖表、熱點(diǎn)圖、測(cè)量圖等圖表類(lèi)型，可以滿足你對(duì)Web圖表的任何需要。

2.2 HighCharts的特點(diǎn)

HighChars依靠界面美觀、運(yùn)行速度快、運(yùn)行無(wú)需插件（HighCharts圖表用JavaScript編，所以不用像Flash和Java那樣需要插件才可以運(yùn)行）等特點(diǎn)受到了程序員們的青睞。我們先來(lái)簡(jiǎn)單的了解一下HighChars的特點(diǎn)。

首先，HighCharts有著非常優(yōu)秀的兼容性支多種設(shè)備與不同的瀏覽器及移動(dòng)平臺(tái)，同時(shí)，它也不受開(kāi)發(fā)語(yǔ)言的約束，可以支持asp、php、java、.net等語(yǔ)言。其次，HighCharts具有提示和縮放圖表的功能，鼠標(biāo)移動(dòng)到圖表的某一點(diǎn)上有提示信息出現(xiàn)，還可以在顯示較大數(shù)據(jù)量的圖表時(shí)，指定放大或縮小某一部分的圖形，并且支持圖表生成后修改，表格可以導(dǎo)出為PDF＼NPG＼JPG＼SVG等格式。最后，HighCharts支持外部數(shù)據(jù)加載和數(shù)據(jù)動(dòng)態(tài)性，支持多種數(shù)據(jù)形式，結(jié)合Jquery、Prototype等javascript框架提供的Ajax接口，可以實(shí)時(shí)地從服務(wù)器取得數(shù)據(jù)并實(shí)時(shí)刷新圖表。

3 HighCharts動(dòng)態(tài)統(tǒng)計(jì)分析在成績(jī)管理系統(tǒng)中的應(yīng)用（Application of HighCharts dynamic statistical analysis in the grade management system）

3.1 任務(wù)描述

動(dòng)態(tài)圖表就是圖表的承現(xiàn)內(nèi)容隨動(dòng)作、后臺(tái)數(shù)據(jù)等外界相關(guān)因素的改變或觸發(fā)而產(chǎn)生變化[5]。結(jié)合成績(jī)管理系統(tǒng)，根據(jù)用戶輸入指定的分?jǐn)?shù)段，實(shí)現(xiàn)統(tǒng)計(jì)各分?jǐn)?shù)段學(xué)生的人數(shù)，以及所占的百分比，并且在Web頁(yè)面上通過(guò)HighCharts將結(jié)果展示出來(lái)，具體流程如圖1所示。

3.2 成績(jī)分段統(tǒng)計(jì)

實(shí)現(xiàn)成績(jī)分段統(tǒng)計(jì)，首先到數(shù)據(jù)庫(kù)中將學(xué)生的成績(jī)查詢到內(nèi)存表中，然后根據(jù)用戶輸入的成績(jī)段，分別進(jìn)行統(tǒng)計(jì)。在統(tǒng)計(jì)各分?jǐn)?shù)段人數(shù)的同時(shí)，將HighCharts需要的JSON數(shù)據(jù)格式字符串生成出來(lái)[6-8]，并響應(yīng)到客戶端瀏覽器，具體實(shí)現(xiàn)如下程序所示。

string scores=Request.Form["scores"]；////獲取成績(jī)段數(shù)據(jù)

if （scores！=null && scores！=""）

{

string[] str=scores.Split（'，'）；////劈分成績(jī)數(shù)據(jù)段到數(shù)組

/////查詢成績(jī)

DataTabledt=new SqlHelper（）.getAllScore（）；////獲取所有學(xué)生成績(jī)數(shù)據(jù)

string cates="["；/////X軸顯示內(nèi)容

string datas="["；////Y軸數(shù)據(jù)

string piedatas="["；///餅圖顯示數(shù)據(jù)

intallStudents=dt.Rows.Count；////總?cè)藬?shù)

if （dt！=null &&dt.Rows.Count> 0）

{ ///分段統(tǒng)計(jì)，拼接字符串

for （inti=0； i

{

cates+="'" +str[i]+"'，"；////添加X(jué)軸數(shù)據(jù)

int total=int.Parse（dt.Compute（"count（studentid）"， "score>"+str[i].Split（'-'）[0]+"and score<="+str[i].Split（'-'）[1]+""）.ToString（））；

datas+=total.ToString（）+"，"；///Y軸數(shù)據(jù)

piedatas+="{name：'"+str[i]+"'，y："+（（（float）（total） / allStudents））.ToString（"0.00"）+"}，"；///餅圖數(shù)據(jù)，計(jì)算百分比

}

if （cates！=""）

cates=cates.TrimEnd（'，'）；///去掉最后一個(gè)，

if （datas！=""）

datas=datas.TrimEnd（'，'）； ///去掉最后一個(gè)，

iedatas=piedatas.TrimEnd（'，'）； ///去掉最后一個(gè)，

Response.Write（cates+"]|"+datas+"]|"+piedatas+"]"）；////輸出需要的Json格式字符串，并用“|”拼接

}

在輸出統(tǒng)計(jì)數(shù)據(jù)格式時(shí)，需要嚴(yán)格按照HighCharts數(shù)據(jù)格式生成，由于HighCharts默認(rèn)數(shù)據(jù)為Json格式，所以在生成Json字符串后，到客戶端瀏覽器需要在重新將字符串轉(zhuǎn)換為Json對(duì)象。

3.3 使用HighCharts展示統(tǒng)計(jì)結(jié)果

當(dāng)瀏覽器端用戶發(fā)送成績(jī)段數(shù)據(jù)請(qǐng)求后，從服務(wù)器端響應(yīng)了三部分?jǐn)?shù)據(jù)，包括柱狀圖的X軸數(shù)據(jù)和Y軸數(shù)據(jù)，餅圖的相關(guān)數(shù)據(jù)。由于服務(wù)器端響應(yīng)時(shí)將三部分?jǐn)?shù)據(jù)使用了分隔符號(hào)“|”拼接起來(lái)的，所以客戶端接收后需要劈分字符串，將對(duì)應(yīng)數(shù)據(jù)分離出來(lái)并轉(zhuǎn)換為Json對(duì)象，具體實(shí)現(xiàn)如下程序所示。

function account（）////統(tǒng)計(jì)功能

{

var scores=$（"#score"）.val（）；///獲取分?jǐn)?shù)段數(shù)據(jù)

if （scores==""） {

$.messager.alert（'提示'， '輸入需要統(tǒng)計(jì)的分?jǐn)?shù)段！'， 'info'）；

}

else {////異步請(qǐng)求

$.ajax（{

type： 'post'，

url： 'account.aspx'，//請(qǐng)求服務(wù)器端url

data： { scores： scores }，

success： function （data）

{

varcate=data.split（"|"）[0]；

var students= data.split（"|"）[1]；

varpiedata=data.split（"|"）[2]

var chart=$（'#container'）.highcharts（）；

chart.xAxis[0].setCategories（eval（cate））；////給X軸填充數(shù)據(jù)

chart.series[0].setData（eval（students））；////給Y軸填充數(shù)據(jù)

chart.series[1].setData（eval（piedata））；////給餅圖填充數(shù)據(jù)

}

}）； }}

當(dāng)服務(wù)器端響應(yīng)正確的HighCharts圖標(biāo)數(shù)據(jù)格式后，將在客戶端的瀏覽器中顯示定義的圖表類(lèi)型，無(wú)論采用哪種圖標(biāo)類(lèi)型，當(dāng)鼠標(biāo)懸浮圖表上時(shí)，將顯示相應(yīng)的數(shù)據(jù)。例如在統(tǒng)計(jì)各分?jǐn)?shù)段學(xué)生人數(shù)時(shí)，當(dāng)鼠標(biāo)懸浮在柱狀圖上面時(shí)，則顯示當(dāng)前分?jǐn)?shù)段學(xué)生的人數(shù)，當(dāng)鼠標(biāo)懸浮在餅圖上面時(shí)，則顯示當(dāng)前分?jǐn)?shù)段學(xué)生人數(shù)占總?cè)藬?shù)的百分比，具體顯示如圖2所示。

4 結(jié)論（Conclusion）

本文利用Highcharts圖表庫(kù)結(jié)合成績(jī)管理系統(tǒng)實(shí)現(xiàn)了成績(jī)動(dòng)態(tài)統(tǒng)計(jì)分析，根據(jù)用戶輸入的分?jǐn)?shù)統(tǒng)計(jì)要求，在系統(tǒng)中創(chuàng)建了直觀的數(shù)據(jù)統(tǒng)計(jì)圖，能夠方便教學(xué)管理人員和教師瀏覽查看統(tǒng)計(jì)數(shù)據(jù)，對(duì)提高教學(xué)效果和完善教學(xué)評(píng)價(jià)有建設(shè)指導(dǎo)意義。這里我們只是簡(jiǎn)單表述并設(shè)計(jì)了一個(gè)Highcharts加載外部json數(shù)據(jù)生成圖表的功能[9]，功能比較簡(jiǎn)單，對(duì)于某些問(wèn)題的考慮也不夠完善，以后我們可以添加更多的控件，就可以進(jìn)行多條件復(fù)合查詢，滿足不同用戶對(duì)成績(jī)查找統(tǒng)計(jì)的不同需求。隨著Highcharts技術(shù)的不斷發(fā)展，和大家不斷深入的研究，一定能創(chuàng)造出更多更加實(shí)用和精美的圖表。

參考文獻(xiàn)（References）

[1] CAI Yunfei，TANGZhenmin，ZHAOChunxia.New Layered SOA-Based Architecture for Multi-Robots Cooperative Online SLAM[J].Chinese Journal of Electronics，2014，01：25-30.

[2] Chen.S.M.，J.M.Tan.Handling Multicriteria Fuzzy Decision-Making Problems Based on Vague Set-Theory[J].Fuzzy SetsandSystems，1994，67（2）：163-172.

[3] Colvin，J.，Tobler，N.，Anderson，J.A..Productivity and Multiscreen Computer Displays[J].Rocky Mountain Communication Review，2007，2（01）：31-53.

[4] 杜海舟，等.教學(xué)督導(dǎo)聽(tīng)課信息管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].上海電力學(xué)院學(xué)報(bào)，2014（04）：346-351.

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

[6] 張福轉(zhuǎn)，王偉.Highcharts在實(shí)踐教學(xué)場(chǎng)所預(yù)約登記系統(tǒng)中的應(yīng)用[J].電腦知識(shí)與技術(shù)，2016（4）：111-112.

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

[8] 黃芳，王曉霞.談高職院校課程考試中的題庫(kù)建設(shè)[J].山東省農(nóng)業(yè)管理干部學(xué)院學(xué)報(bào)，2012，29：3.

[9] 蔡曉云.基于知識(shí)的在線考試系統(tǒng)題庫(kù)設(shè)計(jì)[J].計(jì)算機(jī)與現(xiàn)代化，2011（8）：193-197.

作者簡(jiǎn)介：

周 嵐（1977），女，碩士，副教授.研究領(lǐng)域：軟件開(kāi)發(fā)與數(shù)據(jù)庫(kù).