周嵐

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

關鍵詞：Highcharts；圖表；動態(tài)統(tǒng)計

中圖分類號：TP311.11 文獻標識碼：A

1 引言（Introduction）

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

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

2 HighCharts簡介（A brief introduction to highcharts）

2.1 什么是HighCharts

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

2.2 HighCharts的特點

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

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

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

3.1 任務描述

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

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

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

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

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

{

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

/////查詢成績

DataTabledt=new SqlHelper（）.getAllScore（）；////獲取所有學生成績數(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)計，拼接字符串

for （inti=0； i

{

cates+="'" +str[i]+"'，"；////添加X軸數(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ù)，計算百分比

}

if （cates！=""）

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

if （datas！=""）

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

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

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

}

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

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

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

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

{

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

if （scores==""） {

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

}

else {////異步請求

$.ajax（{

type： 'post'，

url： 'account.aspx'，//請求服務器端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ù)

}

}）； }}

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

4 結(jié)論（Conclusion）

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

參考文獻（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] 杜海舟，等.教學督導聽課信息管理系統(tǒng)的設計與實現(xiàn)[J].上海電力學院學報，2014（04）：346-351.

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

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

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

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

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

作者簡介：

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