얼마전에 http://nightsun.tistory.com/entry/손쉽게-수평-막대-그래프-만들기
요기서 수평 막대 그래프에 관해서 포스팅을 하였는데 수직 막대 그래프로 필요하게 되어서 다시 포스팅~~~ㅎ
하기처럼 css와 javascript만으로 쉽게 구현이 가능하다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
/* Vertical Bar Graph */
.vGraphGender{ padding:20px 0;}
.vGraphGender ul{ margin:0; padding:0; height:200px; border:1px solid #ddd; border-top:0; border-right:0; font-size:11px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.vGraphGender ul:after{ content:""; display:block; clear:both;}
.vGraphGender li{ float:left; display:inline; width:30%; height:100%; margin:0 3%; position:relative; text-align:center; white-space:nowrap;}
.vGraphGender .gTerm{ position:relative; display:inline-block; width:100%; height:20px; line-height:20px; margin:0 -100% -20px 0; padding:200px 0 0 0; vertical-align:bottom; color:#767676; font-weight:bold;}
.vGraphGender .gBar{ position:relative; display:inline-block; width:100%; margin:-1px 0 0 0; border:1px solid #ccc; border-bottom:0; background:#e9e9e9; vertical-align:bottom;}
.vGraphGender .gBar span{ position:absolute; width:100%; top:-20px; left:0; color:#767676;}
.vGraphAge{ padding:20px 0;}
.vGraphAge ul{ margin:0; padding:0; height:200px; border:1px solid #ddd; border-top:0; border-right:0; font-size:11px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.vGraphAge ul:after{ content:""; display:block; clear:both;}
.vGraphAge li{ float:left; display:inline; width:12%; height:100%; margin:0 3%; position:relative; text-align:center; white-space:nowrap;}
.vGraphAge .gTerm{ position:relative; display:inline-block; width:100%; height:20px; line-height:20px; margin:0 -100% -20px 0; padding:200px 0 0 0; vertical-align:bottom; color:#767676; font-weight:bold;}
.vGraphAge .gBar{ position:relative; display:inline-block; width:100%; margin:-1px 0 0 0; border:1px solid #ccc; border-bottom:0; background:#e9e9e9; vertical-align:bottom;}
.vGraphAge .gBar span{ position:absolute; width:100%; top:-20px; left:0; color:#767676;}
</style>
<style type="text/css">
/* Horizontal Bar Graph */
.hGraphArea ul{ margin:0 50px 0 200px; padding:1px 0 0 0; border:1px solid #ddd; border-top:0; border-right:0; font-size:11px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.hGraphArea li{ position:relative; margin:10px 0; white-space:nowrap; vertical-align:top;}
.hGraphArea .gTerm{ position:absolute; width:40px; top:0; left:-200px; line-height:20px; text-align:left; color:#767676; font-weight:bold;}
.hGraphArea .gBar{ position:relative; display:inline-block; height:20px; border:1px solid #ccc; border-left:0; background:#e9e9e9;}
.hGraphArea .gBar span{ position:absolute; width:40px; line-height:20px; top:0; right:-50px; color:#767676;}
ul, li, p { margin: 0; padding: 0; }
.graph { width: 90%; list-style: none; }
.graph li { position: relative; padding: 1px 0; white-space:nowrap;}
.graph li span { display: inline-block; position: relative; height: 20px; line-height: 20px; border:1px solid #ccc; background: #e9e9e9; }
.graph li em { position: absolute; top: 0; right: -45px; font-family: arial; color: #000; }
</style>
</head>
<body>
<h1>Vertical Bar Graph</h1>
<div class="vGraph">
<ul>
<li><span class="gTerm">SUN</span><span class="gBar" style="height:0%"><span>0%</span></span></li>
<li><span class="gTerm">MON</span><span class="gBar" style="height:20%"><span>20%</span></span></li>
<li><span class="gTerm">TUE</span><span class="gBar" style="height:30%"><span>30%</span></span></li>
<li><span class="gTerm">WED</span><span class="gBar" style="height:40%"><span>40%</span></span></li>
<li><span class="gTerm">THU</span><span class="gBar" style="height:50%"><span>50%</span></span></li>
<li><span class="gTerm">FRI</span><span class="gBar" style="height:60%"><span>60%</span></span></li>
<li><span class="gTerm">SAT</span><span class="gBar" style="height:100%"><span>100%</span></span></li>
</ul>
</div>
<h1>Horizontal Bar Graph</h1>
<div class="hGraph">
<ul>
<li><span class="gTerm">SUN</span><span class="gBar" style="width:0%"><span>0%</span></span></li>
<li><span class="gTerm">MON</span><span class="gBar" style="width:20%"><span>20%</span></span></li>
<li><span class="gTerm">TUE</span><span class="gBar" style="width:30%"><span>30%</span></span></li>
<li><span class="gTerm">WED</span><span class="gBar" style="width:40%"><span>40%</span></span></li>
<li><span class="gTerm">THU</span><span class="gBar" style="width:50%"><span>50%</span></span></li>
<li><span class="gTerm">FRI</span><span class="gBar" style="width:60%"><span>60%</span></span></li>
<li><span class="gTerm">SAT</span><span class="gBar" style="width:100%"><span>100%</span></span></li>
</ul>
</div>
</body>
</html>
인터넷 검색을 통해서 찾은 결과물인데 출처를 적으려고 하려니 어디서 찾은지 잊어버렸다...ㅠ
만드신분에게 박수와 감사를~~~^^
'IT > HTML' 카테고리의 다른 글
| 마우스 오버 풍선 도움말 (0) | 2015.05.22 |
|---|---|
| 손쉽게 수평 막대 그래프 만들기 (0) | 2015.05.08 |