가로 차트 그래프

by hohoya33

HTML

<h1>2013년 5월 19일 PC방 점유율</h1>
<div class="graph">
	<ul>		
		<li><strong>1. 서든어택 : </strong><em class="bar"></em><span><b class="data_txt">10.2</b>%</span></li>
		<li><strong>2. 피파온라인3 : </strong><em class="bar"></em><span><b class="data_txt">5.3</b>%</span></li>
		<li><strong>3. 아이온 : </strong><em class="bar"></em><span><b class="data_txt">4.92</b>%</span></li>
		<li><strong>4. 블레이드 & 소울 : </strong><em class="bar"></em><span><b class="data_txt">3.66</b>%</span></li>
		<li><strong>5. 리그오브레전드 : </strong><em class="bar"></em><span><b class="data_txt">37.61</b>%</span></li>
		<li><strong>6. 리니지 :</strong><em class="bar"></em><span><b class="data_txt">3.14</b>%</span></li>
		<li><strong>7. 스타크래프트 : </strong><em class="bar"></em><span><b class="data_txt">3.13</b>%</span></li>
		<li><strong>8. 던전스트라이커 : </strong><em class="bar"></em><span><b class="data_txt">2.26</b>%</span></li>
		<li><strong>9. 워크래프트 3 : </strong><em class="bar"></em><span><b class="data_txt">2.14</b>%</span></li>
		<li><strong>10. 사이퍼즈 : </strong><em class="bar"></em><span><b class="data_txt">1.51</b>%</span></li>
	</ul>
</div>

CSS

* { margin:0; padding:0; }
li { list-style:none; }
h1 { font-size:14px; color:#171717; margin-bottom:20px; }
body { padding:10px; font-size:12px; }

.graph {}
.graph strong { font-weight:normal; }
.graph ul { }
.graph ul li { position:relative; height:30px; margin-bottom:5px; }
.graph ul li * { display:inline-block; position:relative; vertical-align:top; }
.graph ul li .bar { width:0; height:30px; margin-right:10px; background:#eee; }
.graph ul li strong { width:130px; top:9px; }
.graph ul li span { top:8px; font-size:12px; font-family:tahoma; }

.graph ul li.best * { font-weight:bold; color:#7d82bf;  }
.graph ul li.best .bar { background:#7d82bf; }
.graph ul li.best span { top:4px; font-size:18px; font-family:tahoma; }

JavaScript

var graph_bar = function (maxSize) {
	var dataTxt = 0;
	var maxDataTxt = 0;
	$('.graph').find('.data_txt').each(function(e){ 
		if ( maxDataTxt < parseInt($(this).html(),10) /* $(this).html() * 1 */ ) { 
			maxDataTxt = $(this).html();
			$('.graph').find('.best').removeClass('best');
			$(this).parent().parent().addClass('best');
		} 
	});
	$('.graph').find('.bar').each(function(e){
		$(this).delay(e*100).animate({ 	width : ($(this).parent().find('.data_txt').html() / maxDataTxt) * maxSize },1000);
	});
}

$(function(){
	graph_bar('300');
});