投票问卷结果漂亮的横向显示，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>');}})}

好的，就这么多了。