대시보드 등에 통계, 차트를 표현할 때 자주 사용되는 막대그래프를 html/ css 를 사용해서 만들어본다.의 심화편.
기본편에서 만들었던 그래프를 사용해서 x축과 y축이 추가된 세로형 막대그래프를 그려본다.
기존에 만들었던 막대그래프를 세로버전으로 만든 뒤 여러개 나열해서 세로형 차트를 만들었다. 접근성을 완벽하게 맞추는건 어렵지만.. 그나마 전달되기 쉬운 구조로 만들기 위해 신경을 조금 썼다.
x축, y축은 데이터가 여러개 늘어나도 대응 가능하도록 flex로 구성했다.
x축과 y축이 들어갈 공간을 margin과 padding 으로 구성하여 큰 틀을 만든다.
y축의 위치가 left:0, bottom:0이어야 구조를 잡기 수월하기때문에 y축이 들어갈 영역은 padding, x축이 들어갈 영역은 margin 으로 스타일을 준다.
y축에 들어갈 값을 작은 값부터 순차적으로 나열 후 flex-direction: column-reverse
를 통해 세로 역순으로 정렬한다. 논리 순서상 html 구조와 시각적인 나열 부분을 한번에 만족시킬 수 있다. 그리고 blind 텍스트를 사용해 단위를 추가했다. y축의 위치 지정은 position:absolute
를 사용한다.
<ul class="axis_y">
<li class="item">0<span class="blind">시간</span></li>
<li class="item">3<span class="blind">시간</span></li>
<li class="item">6<span class="blind">시간</span></li>
<li class="item">9<span class="blind">시간</span></li>
<li class="item">12<span class="blind">시간</span></li>
</ul>
.vertical_chart_box .axis_y {
display: -webkit-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 20px;
height: 100%;
font-size: 12px;
color: #4a4a4a;
}
x축의 html 구조 또한 y축과 마찬가지로 논리 순서대로 구성 후 스타일을 통해 시각적 위치를 정렬하는 방법을 택한다.
'기준에 대한 -> 값'이 순서이고, 리더기 사용을 고려해야한다고 생각하기 때문에 text_box를 통해 날짜(기준)에 따른 값(기록시간)을 먼저 나열했다.
그리고나서 시각적인 효과를 줄 뿐인 그래프를 나열 후 blind 텍스트로 어떤 data에 대한 값인지 표현했다. 가능하다면 개별 값에 대한 퍼센테이지나 기록된 값을 표현해주면 더 좋겠다.(ex. data 타입1 - 16시간, 80%)
<ul class="axis_x">
<!-- item 을 차트에서 표현해야하는 개수만큼 나열한다. -->
<li class="item">
<div class="text_box">
<strong class="day">17(월)</strong>
<span class="time">00시간00분</span>
</div>
<button type="button" class="graph">
<span class="time data1" style="height:80%;"><span class="blind">data 타입 1</span></span>
</button>
</li>
</ul>
x축 전체를 감싸는 박스에 flex를 적용하여 데이터가 몇개 들어오든 자동으로 정렬되도록 한다.
개별 item 들은 flex:1을 적용하여 동일한 넓이를 갖도록 하고, 각 item을 기준으로하여 text_box 정렬을 위해 position:relative
를 적용한다.
.axis_x{
display:-webkit-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
justify-content:center;
position:relative;
padding:0;
box-sizing:border-box;
height:100%;
border-bottom:1px solid #d3d3d3;
.item{
flex:1;
position:relative;
}
}
기준과 값을 나타내는 text_box는 position:absolute
와 transform
을 사용해서 그래프의 하단 중앙으로 띄운다.
.text_box{
position:absolute;
bottom:-43px;
left:50%;
text-align:center;
-webkit-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
-o-transform:translate(-50%,0);
transform:translate(-50%,0);
.day{
display:block;
font-size:14px;
line-height:19px;
color:#4a4a4a;
&.sat{
color:#3475ed;
}
&.sun{
color:#eb474a;
}
}
.time{
display:block;
margin-top:3px;
font-size:12px;
color:#999;
}
}
세로 막대그래프의 경우 데이터가 하단부터 쌓이기 때문에 y축과 마찬가지로 flex-direction:column-reverse
를 사용하여 세로 역순으로 정렬한다.
graph 스타일의 기본원리는 기본편과 같다. 음수 margin으로 보더가 첨가된 디자인을 적용하고, padding과 box-sizing:content-box
로 마이너스된 값을 보완하다.
(+ graph는 다양한 곳에 사용하기위해 최대한 상속을 덜 시켜 특이성을 낮춰 스타일을 작성하면 좋다.)
.graph{
display:-webkit-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
flex-direction:column-reverse;
position:relative;
margin:0 auto;
padding:0;
width:35px;
height:100%;
background:#e8e8e8;
border-radius:3px 3px 0 0;
overflow:hidden;
.time{
display:block;
position:relative;
margin-bottom:-4px;
padding-top:4px;
box-sizing:content-box;
width:100%;
border-radius:3px 3px 0 0;
&.data1{
background:#e73ea9;
z-index:3;
}
&.data2{
background:#30d97d;
z-index:2;
}
&.data3{
background:#f5dc12;
z-index:1;
}
}
}
graph 클릭 시 상세페이지나 팝업이 띄워질 경우가 있어서 button 태그로 사용될 graph의 경우에만 border:0 처리해줄 스타일을 추가했다.
button.graph{
border:0;
}
이렇게 스타일을 적용한 x축의 item
들을 표현해줘야하는 개수만큼 나열하면 세로 막대그래프가 완성된다.
🐱 : 처음 막대그래프를 그렸을때 신경 못썼던 부분까지 신경쓰면서 만들어서 뿌듯했고 나름 발전을 느낄 수 있어서 좋았다. (똑같은걸 시간이 좀 흐른 뒤 이전 코드를 참고하지 않고 만들어보면 발전 정도를 가늠해보는 것이 참 편리하구나...)
flex reverse는 사실 자주 쓸 일이 없는데 이럴때 참 유용함을 새삼 느꼈다.캘린더도 그렇고 그래프 종류도 한번 완성해두니 여기저기 쓸 곳이 많아서 또 유용하고.. 나름 재밌었다.