基于jQuery+Ajax的ECharts在成績統計中的實現
2019-12-05 08:35:54袁江琛
智能計算機與應用 2019年5期
袁江琛
摘 要：成績統計是學校教學工作中一項重要的內容，本文使用jQuery+Ajax技術實現成績查詢，并通過ECharts圖表的形式呈現出來，在查詢頁面實現異步更新，減少網絡數據傳輸量，提供美觀的數據圖表，大大增強了用戶體驗。
關鍵詞： jQuery; Ajax; JSON; ECharts; 成績統計
【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 引 言
在成績管理系統中，可以通過圖表的形式直觀地顯示成績統計情況，ECharts是一個用JavaScript實現的開源可視化庫，提供了折線圖、柱狀圖、散點圖、餅圖等各種圖表，涵蓋各行業圖表的需求，在成績管理系統中可以通過ECharts個性化定制數據圖表，使學生成績以各種形式進行統計，方便教師和管理員進行分析。
1 相關技術
1.1 jQuery
jQuery是一個優秀的JS代碼庫，提倡的是“寫的少，做的多”的理念，把JS中常用功能封裝起來，提供了一個快捷的JS框架。jQuery的選擇器可以方便地獲取頁面的各個元素，并提供了各種頁面事件，消除了各瀏覽器之間的兼容性問題，同時jQuery對Ajax進行了封裝，使用戶可以更靈活地實現頁面異步更新。
1.2 Ajax
Ajax是一種創建網頁動態交互的技術，該技術可以使網頁在沒有重新加載整個頁面的情況下，有選擇性地更新其中部分內容，與傳統的頁面更新不同的是，這種更新只需要頁面與服務器之間進行少量的數據交換，實現頁面的異步更新，數據傳輸少，更新效率高，用戶體驗好。在jQuery中，可以使用$.get（），$.post（），$.ajax（）等方法創建XMLHttpRequest對象，對于后臺處理的結果可以以XML、html、JSON、text等方式返回，前臺對于處理結果呈現在頁面上，實現頁面異步更新。
1.3 JSON格式
Ajax處理返回的信息很多時候以JSON類型返回。JSON、即JavaScript對象表示法，是一種可以通過JavaScript解析的結構化數據，任何類型的數據都可以通過JSON來表示，其中對象和數組是常用的2種類型。對象表示為鍵值，用大括號來保存對象，用中括號來保存數組，數據之間用逗號分隔。JSON數據格式語法簡單，具有較好的擴展性，結構簡單明了，易于操作，在數據傳輸時比XML具有更高的效率，減少網絡傳輸的壓力。
2 ECharts圖表
ECharts來自Enterprise Charts，是商業級數據圖表，具有提供漂亮的圖形界面、使用簡單、種類繁多、兼容性好等優點，可以流暢地運行在PC端和移動設備上，同時ECharts可以實現異步數據更新，在初始化圖表后可以通過jQuery工具異步獲取數據再通過setOption填入數據和配置相關項即可，其中setOption使用JSON數據格式。
3 系統實現
本文以初一年級8個班的4門課程為例，可以統計某個班級單科成績、全年級某門課程和某個班級所有課程匯總信息，下面擬重點闡釋論述某班單科成績統計的設計實現。
3.1 數據庫設計
成績統計是教學管理系統中的一部分，本文只討論成績統計這一模塊，列舉該模塊需要用到的數據表。該模塊研發中將涉及到的數據表有：學生表、班級表、課程表和成績表。其中，學生表中主要字段有學生學號、姓名、所在班級編號等;班級表中主要字段有班級編號、班級名稱等;課程表中主要字段有課程編號、課程名稱等;成績表中主要字段有成績編號、學生學號、課程編號、成績等。
3.2 某班單科成績統計
當要選擇查看某個班級某門課程的統計情況，可以選擇班級和課程，前臺將班級編號和課程編號傳送給后臺，后臺根據這2個條件對數據庫執行查詢操作，將查詢結果以JSON數據返回前臺，前臺接收數據后將該班學生某門課程的成績以表格的形式表示，同時將各分數段的數據填入相應單元格中，并將這些統計數據以餅圖的方式加以呈現。這里，關于該部分的設計研究內容詳見如下。
（1）后臺程序設計。后臺相應的代碼如下：
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）前臺軟件設計。前臺處理后臺數據主要分3步，研究可得解析分述如下。
① 將學生的成績填入表格中，相關代碼如下：
$（"#ScroeMark table"）.append（"
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 = "
"
}
else {
var ss = "
"
}
$（"#ScroeMark table"）.append（ss）;
}
② 將統計結果填入相應單元格，代碼略。
③ 生成圖表，在該統計模塊中使用餅圖呈現統計結果。首先對圖表的相關數據進行配置，如圖表的標題，數據值的表示方式、數據段的分步以及各個數據分段系列的值，最終使用指定的配置項和數據顯示圖表。其對應代碼如下：
if （myChart ！= null && myChart ！= ""&& myChart ！= undefined） {
myChart.dispose（）;
}
myChart = echarts.init（document.getElementById（"eChart"））;
//指定圖表的配置項和數據
option = {
title： {
text：$（"#Class"）.find（"option：selected"）.text（）+$（"#Subject"）.find（"option：selected"）. text（），subtext： '成績分布'， x： 'center'}，
tooltip： {
trigger： 'item'， formatter： "{a}
{b} ： {c} （g0gggggg%）"}，
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： '{b} ：＼＼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）'}
} } ]
};
//使用剛指定的配置項和數據顯示圖表。
myChart.setOption（option）;
運行效果如圖1所示。由圖1可知，在對各班級某一門課程的成績進行統計后，就可以看到每個班級的均分、最高分、最低分和各分數段的人數，統計結果以折線圖的方式呈現，運行效果如圖2所示。
班級匯總則可以查看某個班級每位學生各門課程的成績以及總分和在班級的排名情況，并以堆積圖的形式呈現，運行效果如圖3所示。
4 結束語
本文通過Ajax+jQuery技術獲取需要更新數據，將查詢結果以JSON數據格式返回前端，同時提供了動態顯示各種成績統計的方式，并且以ECharts圖表的方式呈現統計結果，減少網絡數據傳輸，加快網頁更新速度，以各種圖表形式美觀、直接地顯示統計結果。
參考文獻
[1]王雙立. 譚煒樂，呂鋼，等. 基于ASP.NET的ECharts動態多組曲線圖表的實現[J]. 江蘇科技信息，2018（32）： 33-35.
[2]趙海國. Ajax技術支持下的ECharts動態數據實時刷新技術的實現[J]. 電子技術，2018（3）：25-27，57.
