수직 막대 시점 비교(강조 1개)

월·분기·주차처럼 시간 순서가 있는 값 4~8개 비교. 마지막 시점이나 전환점 하나만 강조. 막대 4~8개. 값 바꾸는 법: 기준선 y = 262. 막대 height = 값 ÷ 최댓값 × 232, 막대 y = 262 − height, 값 글자 y = 막대 y − 8. 칸 폭 = 1088 ÷ 막대 수, 막대 x = 칸×순번 + (칸 폭 − 96) ÷ 2, 글자 x = 칸 가운데. 막대 8개면 막대 폭 96 → 72. 강조 막대는 class="a", 값 class="va".

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Change over Time 분류(세로 막대는 시점 수가 적을 때), Storytelling with Data(https://www.storytellingwithdata.com)의 격자선 제거와 값 직접 표기 참고. 직접 제작.

<div class="dk dk-vbar">
<div class="dk-card">
<p class="ttl"><span>월별 상담 신청 건수 · 단위 건</span></p>
<svg width="1088" height="300" viewBox="0 0 1088 300" role="img">
<line x1="0" y1="262" x2="1088" y2="262" class="ax"/>
<rect x="42.7" y="128" width="96" height="134" rx="3" class="g2"/><text x="90.7" y="120" text-anchor="middle" class="v">182</text><text x="90.7" y="284" text-anchor="middle" class="">4월</text>
<rect x="224" y="111.8" width="96" height="150.2" rx="3" class="g2"/><text x="272" y="103.8" text-anchor="middle" class="v">204</text><text x="272" y="284" text-anchor="middle" class="">5월</text>
<rect x="405.3" y="116.9" width="96" height="145.1" rx="3" class="g2"/><text x="453.3" y="108.9" text-anchor="middle" class="v">197</text><text x="453.3" y="284" text-anchor="middle" class="">6월</text>
<rect x="586.7" y="88.2" width="96" height="173.8" rx="3" class="g2"/><text x="634.7" y="80.2" text-anchor="middle" class="v">236</text><text x="634.7" y="284" text-anchor="middle" class="">7월</text>
<rect x="768" y="64.6" width="96" height="197.4" rx="3" class="g2"/><text x="816" y="56.6" text-anchor="middle" class="v">268</text><text x="816" y="284" text-anchor="middle" class="">8월</text>
<rect x="949.3" y="30" width="96" height="232" rx="3" class="a"/><text x="997.3" y="22" text-anchor="middle" class="va">315</text><text x="997.3" y="284" text-anchor="middle" class="v">9월</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-vbar .dk-card{padding:22px 32px 20px}
.dk-vbar .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-vbar .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-vbar .lg span{display:flex;align-items:center;gap:6px}
.dk-vbar .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-vbar .lg i.c-a{background:var(--ac)}
.dk-vbar .lg i.c-s{background:var(--soft)}
.dk-vbar .lg i.c-g1{background:var(--g1)}
.dk-vbar .lg i.c-g2{background:var(--g2)}
.dk-vbar .lg i.c-g3{background:var(--g3)}
.dk-vbar .lg i.c-g4{background:var(--g4)}
.dk-vbar .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-vbar svg{display:block}
.dk-vbar svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-vbar svg .a{fill:var(--ac)}
.dk-vbar svg .sf{fill:var(--soft)}
.dk-vbar svg .g1{fill:var(--g1)}
.dk-vbar svg .g2{fill:var(--g2)}
.dk-vbar svg .g3{fill:var(--g3)}
.dk-vbar svg .g4{fill:var(--g4)}
.dk-vbar svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-vbar svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-vbar svg text.k{fill:var(--ink2)}
.dk-vbar svg text.v{fill:var(--ink);font-weight:600}
.dk-vbar svg text.va{fill:var(--ac);font-weight:700}
.dk-vbar svg text.on{fill:var(--card);font-weight:600}