做了一个简单的投票问卷管理模块,最后需要实现投票结果横向的显示,而且要求是按题来统计并显示百分比,每个选项投票数。
网上找来找去都没有找到合适自己的,于是自己使用很笨的方法实现了一个。高手路过勿笑~呵呵
国际惯例,先上效果图:
实现原理:使用DIV嵌套DIV,父DIV作为容器,子DIV则为色带,只需设置子DIV宽度并着色即可。
上图中的横向统计色条是使用了2个DIV,外面的DIV是容器(即灰色的色带),里面的DIV则是颜色部分(色带)。色带是根据本选项计算出来的百分比来设置它的宽度并着色的,而它的宽度=容器*百分比。
至于圆角的实现则更加简单了,直接使用jquery.corner.js这个插件即可。
好了,下面准备贴代码。
色带的制作着色是根据每题总投票数,每个选项的投票数计算出来的百分比来进行着色的。所以在遍历循环问题和选项的时候,必须在后台重新组装显示的结果集合,把每个问题的投票总数、每个选项的投票数传进来。
JSP遍历的代码:
<ul>
<c:forEach items="${listQuestion}" var="question" varStatus="status">
<li style="padding-top:10px;">
<span class="oz-form-fields-span" style="padding-left:10px;">${status.index+1} ${question.questionSubject} (${question.questionVoteTotal})</span>
<ul>
<c:forEach items="${question.options}" var="option" varStatus="number">
<li style="padding-top:5px;">
<div style="margin-left: 35px !important;margin-left:30px;">${option.subject}</div>
<div class="barContatin" id="barContatin-${status.index+1}-${number.index}-${option.count}-${question.questionVoteTotal}" style="float: left;">
<div id="bar-${status.index+1}-${number.index}-${option.count}-${question.questionVoteTotal}" class="bar">
</div>
</div>
<div style="float: left;margin-left: 5px;">
<span class="oz-form-fields-span" id="span-${status.index+1}-${number.index}-${option.count}-${question.questionVoteTotal}"></span>
</div>
<div style="clear: both;"></div>
</li>
</c:forEach>
</ul>
</li>
</c:forEach>
</ul>
代码中的listQuestion是在后台重新组装过问题集合,每个问题会有一个投票总数变量(questionVoteTotal),有一个选项的集合(${question.options},也就是options),而每一个选项中都会有一个选项的投票数量(${option.count},也就是count)。
这样把问题选项遍历出来后,就得在页面加载后去处理投票统计了。注意上面红色字体的ID和class,他们是识别每个问题下每个选项的标识,如上面class='bar'的div,如果是第一个问题第一个选项,它的ID则为ID='bar-1-0-投票数量-问题投票总数'。
CSS代码:
<style type="text/css">
.barContatin {
height: 16px;
width: 300px;
margin-left: 35px !important;
margin-left:30px;
margin-bottom:5px;
background: #E5E5E5;
}
.bar {
height: 16px;
}
</style>
JS代码:
$(document).ready(function() {
playBar();
});
//显示统计图
function playBar(){
//定义条形颜色组
var color=['#F2A61F','#592D8E','#5AAF4A','#2A3591','#ABBFD0'];
$('.bar').each(function(){//遍历class为bar的div,也就是色条
var str=$(this).attr('id').split('-');
var optionVoteTotal=str[3]; //选项投票数量
var questionVoteTotal=str[4];//问题投票总数
//设置bar宽度
var width=(optionVoteTotal/questionVoteTotal)*300;//300是容器的宽度
$(this).width(width);
//设置bar颜色
if(str[2]<5){//如果选项个数小于5
$(this).css("background",color[str[2]]);
}else if(str[2]<11){//如果选项个数小于11
$(this).css("background",color[str[2]-5]);
}else{//如果更多
$(this).css("background",color[0]);
}
//设置bar圆角
$('#'+$(this).attr('id')).corner("right");//此处如需圆角,则需引入jquery.corner.js这个插件。不设置也可以。
//设置bar容器圆角
var barContatin=$(this).attr('id').replace('bar','barContatin')
$('#'+barContatin).corner("right");
//设置百分比及投票数
var spanStr=$(this).attr('id').replace('bar','span');
var percent=(optionVoteTotal*100/questionVoteTotal).toFixed(2);
if(str[2]<5){
$('#'+spanStr).append(percent+'% '+'<font color='+ color[str[2]] +'>('+ optionVoteTotal +')</font>');
}else if(str[2]<11){
$('#'+spanStr).append(percent+'% '+'<font color='+ color[str[2]-5] +'>('+ optionVoteTotal +')</font>');
}else{
$('#'+spanStr).append(percent+'% '+'<font color='+ color[0] +'>('+ optionVoteTotal +')</font>');
}
})
}
好的,就这么多了。