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

袁江琛

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

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

【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 引 言

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

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

1.1 jQuery

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

1.2 Ajax

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

1.3 JSON格式

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

2 ECharts圖表

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

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

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

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

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

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

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

（1）后臺(tái)程序設(shè)計(jì)。后臺(tái)相應(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）前臺(tái)軟件設(shè)計(jì)。前臺(tái)處理后臺(tái)數(shù)據(jù)主要分3步，研究可得解析分述如下。

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

$（"#ScroeMark table"）.append（"班級(jí)姓名課程分?jǐn)?shù)班級(jí)姓名課程分?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)計(jì)結(jié)果填入相應(yīng)單元格，代碼略。

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

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

myChart.dispose（）;

}

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

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

option = {

title： {

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

tooltip： {

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

 ： {c} （g0gggggg%）"}，

legend： {

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

series： [

{

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

label： {

normal： {

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

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）'}

} } ]

};

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

myChart.setOption（option）;

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

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

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

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

參考文獻(xiàn)

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

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