설문 작업을 하면서 설문에 참여한 고객의 응답 현황을 수평 막대 그래프로 구현하는 작업이 있었다.
하기처럼 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">
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; background: #eee; }
.graph li em { position: absolute; top: 0; right: -45px; font-family: arial; color: #000; }
</style>
</head>
<body>
<ul id="g1" class="graph">
<li>1 : <span style="width: 10%"><em>10%</em></span></li>
<li>2 : <span style="width: 20%"><em>20%</em></span></li>
<li>3 : <span style="width: 30%"><em>30%</em></span></li>
<li>4 : <span style="width: 40%"><em>40%</em></span></li>
<li>5 : <span style="width: 100%"><em>100%</em></span></li>
</ul>
<hr />
<ul id="g2" class="graph">
<li><span style="width: 50%"><em>50%</em></span></li>
<li><span style="width: 5%"><em>5%</em></span></li>
<li><span style="width: 60%"><em>60%</em></span></li>
<li><span style="width: 70%"><em>70%</em></span></li>
<li><span style="width: 99%"><em>99%</em></span></li>
</ul>
</body>
</html>
<script type="text/javascript">
drawGraph(document.getElementById("g1"));
drawGraph(document.getElementById("g2"));
function drawGraph(obj) {
this.gages = obj.getElementsByTagName("span");
this.values = obj.getElementsByTagName("em");
for(var i = 0; i < this.gages.length; i ++) {
(function(idx) {
var current_value = 0;
var gage_object = this.gages[idx];
var gage_value = this.values[idx];
var gage_width = parseInt(gage_object.style.width);
var timer = null;
timer = setInterval(function() {
if(current_value < gage_width) {
current_value += Math.ceil((gage_width - current_value) / 15);
gage_object.style.width = current_value + "%";
gage_value.innerHTML = current_value + "%";
} else {
clearInterval(timer);
}
}, 10);
})(i);
}
}
</script>
인터넷 검색을 통해서 찾은 결과물인데 출처를 적으려고 하려니 어디서 찾은지 잊어버렸다...ㅠ
만드신분에게 박수와 감사를~~~^^
'IT > HTML' 카테고리의 다른 글
| 마우스 오버 풍선 도움말 (0) | 2015.05.22 |
|---|---|
| 막대 그래프 (0) | 2015.05.22 |