HighCharts動態統計分析在成績管理系統中的應用

周嵐

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

關鍵詞：Highcharts；圖表；動態統計

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

1 引言（Introduction）

在成績管理系統中，成績分析是系統中最重要的組部分和最主要的環節。教師和管理人員通過它[1]，找出教學中存在的問題。

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

2 HighCharts簡介（A brief introduction to highcharts）

2.1 什么是HighCharts

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

2.2 HighCharts的特點

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

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

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

3.1 任務描述

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

3.2 成績分段統計

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

string scores=Request.Form["scores"]；////獲取成績段數據

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

{

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

/////查詢成績

DataTabledt=new SqlHelper（）.getAllScore（）；////獲取所有學生成績數據

string cates="["；/////X軸顯示內容

string datas="["；////Y軸數據

string piedatas="["；///餅圖顯示數據

intallStudents=dt.Rows.Count；////總人數

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

{ ///分段統計，拼接字符串

for （inti=0； i

{

cates+="'" +str[i]+"'，"；////添加X軸數據

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

datas+=total.ToString（）+"，"；///Y軸數據

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

}

if （cates！=""）

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

if （datas！=""）

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

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

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

}

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

3.3 使用HighCharts展示統計結果

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

function account（）////統計功能

{

var scores=$（"#score"）.val（）；///獲取分數段數據

if （scores==""） {

$.messager.alert（'提示'， '輸入需要統計的分數段！'， '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軸填充數據

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

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

}

}）； }}

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

4 結論（Conclusion）

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

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

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

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

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

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

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

作者簡介：

周 嵐（1977），女，碩士，副教授.研究領域：軟件開發與數據庫.