반응형
웹개발을 하다 보면 챠트를 사용하는 경우가 종종 있다. 하지만 간단한 Bar 챠트를 사용하기 위해
Chart.js 또는 기타 챠트 라이브러리를 사용하기가 비효율적일때 사용하면 적당한 방법이다.
CSS를 통해 애니메이션은 덤이고 아주 쉽게 만들수 있는 예제로 각 상황에 맞게 수정해서 사용하면 된다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="graphWrap">
<div id="barChart" class="barChart">
<div id="chartValue">0</div>
</div>
</div>
<style>
div.graphWrap{
position:relative; width:400px; height:250px;
background-color:#EEEEEE;
}
div.barChart{
position: absolute;
left:50%;
bottom:0px; width:30px;
height:200px;
perspective-origin: center bottom ;
transform: translate(-50%) scaleX(2);
background-color:#9999ff;
border-radius:15px;
transition:height 0.25s;
}
div.barChart::before{
position: absolute;
content:"";
width:30px; height:30px; border-radius: 100%;
background-color:rgba(255,255,255,0.25);
}
div.barChart::after{
position: absolute;
content:"";
width:30px; height:30px; bottom:0;
border-radius: 100%;
background-color:rgba(0,0,0,0.15);
}
div#chartValue{
position: absolute; left:50%;
transform: scaleX(0.5) translateX(-100%) rotate(-0.03deg) translateY(-15px); text-align:center;
font-weight:bold; font-size:24px; color:#000000;
filter:drop-shadow(0px 5px 3px rgba(0,0,0,0.25));
}
</style>
<script>
var tmpH;
setInterval(()=>{
tmpH = (Math.random()*150+50);
document.getElementById("barChart").style.height = tmpH + "px";
document.getElementById("chartValue").innerText = Math.round(tmpH);
}, 1000 );
</script>
</body>
</html>
반응형
'Html+CSS+JS' 카테고리의 다른 글
| axios CORS 에러 해결방법 ( 클라이언트 ) (2) | 2021.02.17 |
|---|---|
| 자바스크립트 정규식 특정문자 치환 모음 (0) | 2021.02.15 |
| Flash(플래시)를 대채하기 위한 준비 (0) | 2021.02.08 |
| 플래시를 대채할 자바스크립트 라이브러리(웹기반) (0) | 2021.02.07 |
| 웹폰트 사용시 작은 텍스트도 부드럽게 나오게 하기 (1) | 2021.02.06 |