SVG中国

来源：SVG中国(ChinaSVG.COM) | 《兵工自动化》2004年第23卷第5期

　　使用JSP技术将统计数据动态生成SVG图形。在基于B/S三层结构的考试成绩统计系统中，前端使用JSP技术根据试卷名与分数段查询得到考试成绩列表，再将统计结果生成SVG图形。

摘要

　　使用JSP技术由统计数据可动态生成SVG图形。在基于B/S三层结构的学生考试成绩统计系统中，前端使用JSP技术，score_query.jsp页面根据试卷名与分数段查询得到考试成绩列表，再由页面displaychart.jsp统计结果生成SVG图形。

引言

　　在大量数据的统计中提取有用信息，要求统计数据不仅能在不同系统间交换且能直观表达。统计图表能直观表示数据，SVG可实现跨平台，故使用JSP技术由统计数据动态生成SVG统计图。

1 SVG及其相关技术

　　SVG是W3C组织为适应Internet制定的基于XML语言的可升级矢量图形语言描述规范，由元素和属性等标记标注的文本组成。SVG中定义了circle、ellipse、rect、line、polyline、polygon六种基本形状，这些基本形状和路径可以组合起来形成任何复杂的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由fill和stroke属性确定。通过替换方法把图像替换为音频信息，使有视觉障碍的人也能得到SVG的信息。

2 学生考试成绩统计系统实例

　　由于XML与Java的无缝结合能实现跨平台，故本系统采用B/S三层结构，前端使用JSP技术。第一层浏览器提交用户服务请求。第二层Web应用服务器来于请求中的逻辑处理并与第三层数据库服务器交换数据，然后返回用户所需结果并在第一层浏览器显示。
　　本系统实现了智能组卷、学生考试、自动阅卷等功能。在自动阅卷完成后，将学生得分情况写入数据库中的成绩表scores，如表1。

表1 成绩表scores

　　从成绩表中学生的得分情况可以分析该套试题的信度、区分度等指标，并由此评价智能组卷的质量。根据考试学理论，试卷的得分如果基本符合正态分布，则该套试题具有较好的区分度。为了形象地显示每次考试得分的分布情况，可以生成SVG统计图来直观地表示。在score_query.jsp页面中选择试卷名并指定分数段就可查询到该次考试的成绩列表，如图1。

　　点击页面下方的查看统计图表的超链接，就转入displaychart.jsp页面，即显示统计图页面。页面displaychart.jsp获取从score_query.jsp传递来的参数试卷号pno，使用一个数据库连接类的实例dbcon对数据库进行查询、统计，以20分为一个分数段，得到[0,20]、[20,20]、[40,60]、[60,80]、[80,100]等5个分数段区间内的考生数。代表各分数段的矩形长度Len i＝Length (Count i/Total)，(i＝1,2,3,4,5)计算得到。其中Len i代表分数为[20(i-1), 20i]的矩形长度。Length是一个预先设定的常量，本例中为200。Count i是分数为[20(i-1),20i]的考生数。Total是该次考试的总考生数。最后根据计算出的矩形参数生成SVG图形，如图2。其中使用标签<rect>绘制矩形，标签<text>绘制文字。

　　displaychart.jsp统计出参加考试的总考生数和各个分数区间的考生数，并由此绘制统计图。需要注意的是，SVG标准中带有所有的标准字体，要显示中文只需指定文字的字体为支持中文的字体即可[2]。displaychart.jsp的源代码如下：

<%--获取试卷唯一ID号及该次考试的成绩记录--%>
<%
String pno=request.getParameter("pno");
String sql="select totalscore from paper,scores where paper.pno=scores.pno 
and paper.pno="+pno;
rs=dbcon.executeQuery(sql);
%>
<%---用switch语句统计各分数区间的考生人数---%>
<%
while(rs.next())
{
totalstudent++;
level=rs.getInt("totalscore")/20;
switch(level)
{
case 0: count[1]++; break; case 1: count[2]++; break; cas e 2: count[3]++; 
break; case 3: count[4]++; break; case 4: count[5]++; break;
default:count[5]++;
}
}
%>
<%-计算各分数段矩形长度并存入数组length--%>
<%
for(i=1;i<=5;i++) {
length[i]=((count[i]*200.00)/ totalstudent);
}
%>
<%--根据计算结果生成SVG文档--%>
<svg width="100%" height="100%" >
<text x="150" y="50" font-size="30" stroke="black" 
font-family="SimSun" font-weight="bold">
统计结果</text>
<rect x="15" y="100" width="600" height="250" 
fill="none" stroke="blue" stroke-width="2"/>
<text x="35" y="125" font-size="18" stroke="black"
font-family="SimSun">参加考试人数：
<%=totalstudent%>人</text>
<% for(i=1;i<=5;i++)
{
%>
<!--画出各分数段人数成正比的矩形并注释文字-->
<text x="35" y="<%=130+i*25%>">[<%=
20*i-20%> --<%=20*i%>]</text>
<g fill="yellow" stroke="red" stroke-width="3">
<rect x="150" y="<%=115+i*25%>" heig ht= "15" 
width="<%=length[i]%>"/>
</g> 
<text x="<%=155+count[i]*200.0/ totalstudent%>"
y="<%=130+i*25%>"><%=count[i]%>persons</text>
<%}%>
</svg>

结束语

　　SVG彻底改变了Web图形表达信息的方式，可应用于动态绘图、数学制图、在线演示、图形化交互、教育游戏等。文档规模小，使它适用于移动设备，其扩展特性为W3C、业界企业和开发者预留了无限的发挥空间。

参考文献

　　[1] 王军,等.BROWN JSP编程指南（第二版）[M].北京:电子工业出版社,2002.
　　[2] Scalable Vector Graphics (SVG) 1.1 Specification[EB/OL].http://www.w3.org/TR/SVG/.
　　[3] 魏应彬,周文山.由JSP动态生成SVG图形[J].计算机应用与软件,2003,(1):71-
72.

作者简介

　　苟媛媛（1979-），女，四川人，2001年毕业于西南科技大学，现西南科技大学在读硕士研究生，从事网络信息技术研究。
　　刘志勤，西南科技大学计算机科学院

(THE END)