投票问卷结果漂亮的横向显示，jquery简单实现。

做了一个简单的投票问卷管理模块，最后需要实现投票结果横向的显示，而且要求是按题来统计并显示百分比，每个选项投票数。

网上找来找去都没有找到合适自己的，于是自己使用很笨的方法实现了一个。高手路过勿笑~呵呵

国际惯例，先上效果图：

实现原理：使用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>');
		}
	})
	
}

好的，就这么多了。