반폭 · 시점별 수직 막대(5~7개)

월별·주별처럼 시점이 5~7개인 값의 증가를 절반 칸에. 마지막 시점 또는 말하려는 시점 하나만 강조색. 시점이 8개 이상이면 반폭 라인을 사용. 값 바꾸는 법: 막대 높이 = 값 ÷ 180(축 최댓값) × 168. rect 의 y = 196 − 높이, height = 높이. 막대 중심 x = 10 + (380 ÷ 막대 수) × (순번 − 0.5), rect x = 중심 − 19(폭 38). 값 글자 y = rect y − 8, 시점 글자 y = 216. 강조 막대는 class="f-a", 값 글자 class="va t14". 축 최댓값은 가장 큰 값보다 조금 크게 잡는다.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Change over Time 분류(column)와 Storytelling with Data(https://www.storytellingwithdata.com)의 값 직접 표기, 축 눈금 생략 방식을 참고. 직접 제작.

<div class="dk dkh dkh-g-vbar"><div class="dk-card"><p class="dk-lb">월별 상담 문의 지수 · 4월 100 기준</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 224" preserveAspectRatio="xMidYMid meet" role="img">
<line x1="0" y1="196" x2="400" y2="196" class="ax"/>
<rect x="22.7" y="102.7" width="38" height="93.3" rx="3" class="f-g2"/><text x="41.7" y="94.7" text-anchor="middle" class="v">100</text><text x="41.7" y="216" text-anchor="middle">4월</text>
<rect x="86" y="95.2" width="38" height="100.8" rx="3" class="f-g2"/><text x="105" y="87.2" text-anchor="middle" class="v">108</text><text x="105" y="216" text-anchor="middle">5월</text>
<rect x="149.3" y="83.1" width="38" height="112.9" rx="3" class="f-g2"/><text x="168.3" y="75.1" text-anchor="middle" class="v">121</text><text x="168.3" y="216" text-anchor="middle">6월</text>
<rect x="212.7" y="70" width="38" height="126" rx="3" class="f-g2"/><text x="231.7" y="62" text-anchor="middle" class="v">135</text><text x="231.7" y="216" text-anchor="middle">7월</text>
<rect x="276" y="54.1" width="38" height="141.9" rx="3" class="f-g2"/><text x="295" y="46.1" text-anchor="middle" class="v">152</text><text x="295" y="216" text-anchor="middle">8월</text>
<rect x="339.3" y="31.7" width="38" height="164.3" rx="3" class="f-a"/><text x="358.3" y="23.7" text-anchor="middle" class="va t14">176</text><text x="358.3" y="216" text-anchor="middle" class="v">9월</text>

</svg></div>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

.dkh-g-vbar .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-vbar .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-vbar .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-vbar .cv{flex:1;min-height:0;position:relative}
.dkh-g-vbar .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-vbar svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-vbar svg .k{fill:var(--ink2)}
.dkh-g-vbar svg .v{fill:var(--ink);font-weight:600}
.dkh-g-vbar svg .va{fill:var(--ac);font-weight:700}
.dkh-g-vbar svg .on{fill:var(--card);font-weight:600}
.dkh-g-vbar svg .t14{font-size:14px}
.dkh-g-vbar svg .f-a{fill:var(--ac)}
.dkh-g-vbar svg .f-w{fill:var(--acw)}
.dkh-g-vbar svg .f-s{fill:var(--soft)}
.dkh-g-vbar svg .f-c{fill:var(--card)}
.dkh-g-vbar svg .f-g1{fill:var(--g1)}
.dkh-g-vbar svg .f-g2{fill:var(--g2)}
.dkh-g-vbar svg .f-g3{fill:var(--g3)}
.dkh-g-vbar svg .f-g4{fill:var(--g4)}
.dkh-g-vbar svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-vbar svg .gr{stroke:var(--line);stroke-width:1;fill:none}