基于jQuery+Ajax的ECharts在成績統(tǒng)計中的實現(xiàn)

袁江琛

摘 要：成績統(tǒng)計是學(xué)校教學(xué)工作中一項重要的內(nèi)容，本文使用jQuery+Ajax技術(shù)實現(xiàn)成績查詢，并通過ECharts圖表的形式呈現(xiàn)出來，在查詢頁面實現(xiàn)異步更新，減少網(wǎng)絡(luò)數(shù)據(jù)傳輸量，提供美觀的數(shù)據(jù)圖表，大大增強了用戶體驗。

關(guān)鍵詞： jQuery; Ajax; JSON; ECharts; 成績統(tǒng)計

【Abstract】 Achievement statistics is an important part of school teaching. jQuery + Ajax technology is used to realize achievement query in the paper. The query result is presented in the form of ECharts.Asynchronous updates on query pages can reduce the amount of network data transmission， provide beautiful data charts， and enhance user experience greatly.

【Key words】 ?jQuery; Ajax; JSON; ECharts; achievement statistics

0 引 言

在成績管理系統(tǒng)中，可以通過圖表的形式直觀地顯示成績統(tǒng)計情況，ECharts是一個用JavaScript實現(xiàn)的開源可視化庫，提供了折線圖、柱狀圖、散點圖、餅圖等各種圖表，涵蓋各行業(yè)圖表的需求，在成績管理系統(tǒng)中可以通過ECharts個性化定制數(shù)據(jù)圖表，使學(xué)生成績以各種形式進(jìn)行統(tǒng)計，方便教師和管理員進(jìn)行分析。

1 相關(guān)技術(shù)

1.1 jQuery

jQuery是一個優(yōu)秀的JS代碼庫，提倡的是“寫的少，做的多”的理念，把JS中常用功能封裝起來，提供了一個快捷的JS框架。jQuery的選擇器可以方便地獲取頁面的各個元素，并提供了各種頁面事件，消除了各瀏覽器之間的兼容性問題，同時jQuery對Ajax進(jìn)行了封裝，使用戶可以更靈活地實現(xiàn)頁面異步更新。

1.2 Ajax

Ajax是一種創(chuàng)建網(wǎng)頁動態(tài)交互的技術(shù)，該技術(shù)可以使網(wǎng)頁在沒有重新加載整個頁面的情況下，有選擇性地更新其中部分內(nèi)容，與傳統(tǒng)的頁面更新不同的是，這種更新只需要頁面與服務(wù)器之間進(jìn)行少量的數(shù)據(jù)交換，實現(xiàn)頁面的異步更新，數(shù)據(jù)傳輸少，更新效率高，用戶體驗好。在jQuery中，可以使用$.get（），$.post（），$.ajax（）等方法創(chuàng)建XMLHttpRequest對象，對于后臺處理的結(jié)果可以以XML、html、JSON、text等方式返回，前臺對于處理結(jié)果呈現(xiàn)在頁面上，實現(xiàn)頁面異步更新。

1.3 JSON格式

Ajax處理返回的信息很多時候以JSON類型返回。JSON、即JavaScript對象表示法，是一種可以通過JavaScript解析的結(jié)構(gòu)化數(shù)據(jù)，任何類型的數(shù)據(jù)都可以通過JSON來表示，其中對象和數(shù)組是常用的2種類型。對象表示為鍵值，用大括號來保存對象，用中括號來保存數(shù)組，數(shù)據(jù)之間用逗號分隔。JSON數(shù)據(jù)格式語法簡單，具有較好的擴(kuò)展性，結(jié)構(gòu)簡單明了，易于操作，在數(shù)據(jù)傳輸時比XML具有更高的效率，減少網(wǎng)絡(luò)傳輸?shù)膲毫Α?/p>

2 ECharts圖表

ECharts來自Enterprise Charts，是商業(yè)級數(shù)據(jù)圖表，具有提供漂亮的圖形界面、使用簡單、種類繁多、兼容性好等優(yōu)點，可以流暢地運行在PC端和移動設(shè)備上，同時ECharts可以實現(xiàn)異步數(shù)據(jù)更新，在初始化圖表后可以通過jQuery工具異步獲取數(shù)據(jù)再通過setOption填入數(shù)據(jù)和配置相關(guān)項即可，其中setOption使用JSON數(shù)據(jù)格式。

3 系統(tǒng)實現(xiàn)

本文以初一年級8個班的4門課程為例，可以統(tǒng)計某個班級單科成績、全年級某門課程和某個班級所有課程匯總信息，下面擬重點闡釋論述某班單科成績統(tǒng)計的設(shè)計實現(xiàn)。

3.1 數(shù)據(jù)庫設(shè)計

成績統(tǒng)計是教學(xué)管理系統(tǒng)中的一部分，本文只討論成績統(tǒng)計這一模塊，列舉該模塊需要用到的數(shù)據(jù)表。該模塊研發(fā)中將涉及到的數(shù)據(jù)表有：學(xué)生表、班級表、課程表和成績表。其中，學(xué)生表中主要字段有學(xué)生學(xué)號、姓名、所在班級編號等;班級表中主要字段有班級編號、班級名稱等;課程表中主要字段有課程編號、課程名稱等;成績表中主要字段有成績編號、學(xué)生學(xué)號、課程編號、成績等。

3.2 某班單科成績統(tǒng)計

當(dāng)要選擇查看某個班級某門課程的統(tǒng)計情況，可以選擇班級和課程，前臺將班級編號和課程編號傳送給后臺，后臺根據(jù)這2個條件對數(shù)據(jù)庫執(zhí)行查詢操作，將查詢結(jié)果以JSON數(shù)據(jù)返回前臺，前臺接收數(shù)據(jù)后將該班學(xué)生某門課程的成績以表格的形式表示，同時將各分?jǐn)?shù)段的數(shù)據(jù)填入相應(yīng)單元格中，并將這些統(tǒng)計數(shù)據(jù)以餅圖的方式加以呈現(xiàn)。這里，關(guān)于該部分的設(shè)計研究內(nèi)容詳見如下。

（1）后臺程序設(shè)計。后臺相應(yīng)的代碼如下：

public void getScore（HttpContext context）

{

string s="";

string sqlStr="select ClassName，StudentName，SubjectName，ScroeMark from v_Score where classid=@ClassID and subjectid=@SubjectID";

SqlParameter[] para={ new SqlParameter（"@ClassID"， context.Request.Form["ClassID"]）， new SqlParameter（"@SubjectID"， context.Request.Form["SubjectID"]） };

SqlDataReader sda=DB.ExecuteReader（sqlStr， CommandType.Text， para）;

string item="";

while（sda.Read（））

{

if（item ！= ""）item += "，";

item += "{＼＼"ClassName＼＼"：＼＼"" + sda[0].ToString（） + "＼＼"，＼＼"StudentName＼＼"：＼＼"" + sda[1].ToString（） + "＼＼"，＼＼"SubjectName＼＼"：＼＼"" + sda[2].ToString（） + "＼＼"，＼＼"ScroeMark＼＼"：＼＼"" + sda[3].ToString（） + "＼＼"}";

}

s += "{＼＼"Items＼＼"：[" + item + "]，";

sqlStr="select count（case when ScroeMark between 90 and 100 then 1 end） as[90-100分]， count（case when ScroeMark between 80 and 89 then 1 end） as[80-89分]， count（case when ScroeMark between 70 and 79 then 1 end） as[70-79分]，count（case when ScroeMark between 60 and 69 then 1 end） as[60-69分]，count（case when ScroeMark<60 then 1 end） as[不及格] from v_Score where classid=@ClassID and subjectid=@SubjectID";

sda=DB.ExecuteReader（sqlStr， CommandType.Text， para）;

sda.Read（）;

s += "＼＼"S9＼＼"：＼＼""+sda[0].ToString（）+"＼＼"，＼＼"S8＼＼"：＼＼""+sda[1].ToString（）+"＼＼"，＼＼"S7＼＼"：＼＼""+sda[2].ToString（）+"＼＼"，＼＼"S6＼＼"：＼＼""+sda[3].ToString（）+"＼＼"，＼＼"S5＼＼"：＼＼""+sda[4].ToString（）+"＼＼"}";

context.Response.Write（s）;

}

（2）前臺軟件設(shè)計。前臺處理后臺數(shù)據(jù)主要分3步，研究可得解析分述如下。

① 將學(xué)生的成績填入表格中，相關(guān)代碼如下：

$（"#ScroeMark table"）.append（"班級姓名課程分?jǐn)?shù)班級姓名課程分?jǐn)?shù)"）;

for （var i=0; i< 25;i++） {

var ss="";

if （i>=a.Items.length） {

var ss="" +

"";

}

else if （（i + 25） < a.Items.length） {

var ss = "" + a.Items[i].ClassName + "" + a.Items[i].SubjectName + "" + a.Items[i].StudentName + "" + a.Items[i].ScroeMark + "" +

"" + a.Items[i+25].ClassName + "" + a.Items[i+25].SubjectName+"" + a.Items[i + 25].StudentName + "" + a.Items[i + 25].ScroeMark + "";

}

else {

var ss = "" + a.Items[i].ClassName + "" + a.Items[i].SubjectName + "" + a.Items[i].StudentName + "" + a.Items[i].ScroeMark + "" +

"";

}

$（"#ScroeMark table"）.append（ss）;

}

② 將統(tǒng)計結(jié)果填入相應(yīng)單元格，代碼略。

③ 生成圖表，在該統(tǒng)計模塊中使用餅圖呈現(xiàn)統(tǒng)計結(jié)果。首先對圖表的相關(guān)數(shù)據(jù)進(jìn)行配置，如圖表的標(biāo)題，數(shù)據(jù)值的表示方式、數(shù)據(jù)段的分步以及各個數(shù)據(jù)分段系列的值，最終使用指定的配置項和數(shù)據(jù)顯示圖表。其對應(yīng)代碼如下：

if （myChart ！= null && myChart ！= ""&& myChart ！= undefined） {

myChart.dispose（）;

}

myChart = echarts.init（document.getElementById（"eChart"））;

//指定圖表的配置項和數(shù)據(jù)

option = {

title： {

text：$（"#Class"）.find（"option：selected"）.text（）+$（"#Subject"）.find（"option：selected"）. text（），subtext： '成績分布'， x： 'center'}，

tooltip： {

trigger： 'item'， formatter： "{a}

 ： {c} （j5i0abt0b%）"}，

legend： {

orient： 'vertical'， left： 'right'， data： [' 90-100'， '80-89'， ' 70-79'， '60-69'， '<60'] }，

series： [

{

name： '成績'， type： 'pie'， radius： '80%'， center： ['50%'， '60%']，

label： {

normal： {

show：true， position：'inner'， formatter： ' ：＼＼n {c}人＼＼n （j5i0abt0b%）'}}，

data： [

{ value： s1， name： ' 90-100' }，

{ value： s2， name： ' 80-89' }，

{ value： s3， name：' 70-79' }，

{ value： s4， name： ' 60-69' }，

{ value： s5， name： '<60' }]，

itemStyle： {

emphasis： {

shadowBlur： 10， shadowOffsetX： 0， shadowColor： 'rgba（0， 0， 0， 0.5）'}

} } ]

};

//使用剛指定的配置項和數(shù)據(jù)顯示圖表。

myChart.setOption（option）;

運行效果如圖1所示。由圖1可知，在對各班級某一門課程的成績進(jìn)行統(tǒng)計后，就可以看到每個班級的均分、最高分、最低分和各分?jǐn)?shù)段的人數(shù)，統(tǒng)計結(jié)果以折線圖的方式呈現(xiàn)，運行效果如圖2所示。

班級匯總則可以查看某個班級每位學(xué)生各門課程的成績以及總分和在班級的排名情況，并以堆積圖的形式呈現(xiàn)，運行效果如圖3所示。

4 結(jié)束語

本文通過Ajax+jQuery技術(shù)獲取需要更新數(shù)據(jù)，將查詢結(jié)果以JSON數(shù)據(jù)格式返回前端，同時提供了動態(tài)顯示各種成績統(tǒng)計的方式，并且以ECharts圖表的方式呈現(xiàn)統(tǒng)計結(jié)果，減少網(wǎng)絡(luò)數(shù)據(jù)傳輸，加快網(wǎng)頁更新速度，以各種圖表形式美觀、直接地顯示統(tǒng)計結(jié)果。

參考文獻(xiàn)

[1]王雙立. 譚煒樂，呂鋼，等. 基于ASP.NET的ECharts動態(tài)多組曲線圖表的實現(xiàn)[J]. 江蘇科技信息，2018（32）： 33-35.

[2]趙海國. Ajax技術(shù)支持下的ECharts動態(tài)數(shù)據(jù)實時刷新技術(shù)的實現(xiàn)[J]. 電子技術(shù)，2018（3）：25-27，57.