做了一個簡單的投票問卷管理模組，最後需要實現投票結果橫向的顯示，而且要求是按題來統計並顯示百分比，每個選項投票數。

網上找來找去都沒有找到合適自己的，於是自己使用很笨的方法實現了一個。高手路過勿笑~呵呵

國際慣例，先上效果圖：

實現原理：使用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>
 

$(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>');
		}
	})
	
}