반폭 · 묶음 막대 2계열(3~4묶음)

두 계열(지난해와 올해, 우리와 경쟁, 목표와 실적)을 묶음별로 나란히 비교할 때 절반 칸에. 묶음 3~4개, 계열 2개. 강조색은 말하려는 막대 하나. 값 바꾸는 법: 막대 높이 = 값 ÷ 140(축 최댓값) × 140, rect 의 y = 172 − 높이. 묶음 중심 x = 10 + (380 ÷ 묶음 수) × (순번 − 0.5). 첫 계열 rect x = 중심 − 29, 둘째 계열 x = 중심 + 2(폭 27). 값 글자 x = 막대 중심, y = rect y − 7. 강조 막대 class="f-a", 값 글자 class="va t14". 범례 이름 교체.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Magnitude 분류(paired column)와 Datawrapper Academy(https://academy.datawrapper.de)의 묶음 막대 안내(계열 2개까지, 비교 계열은 옅게)를 참고. 직접 제작.

<div class="dk dkh dkh-g-gbar"><div class="dk-card"><p class="dk-lb">분기별 전환 건수 지수 · 지난해 평균 70 기준</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 198" preserveAspectRatio="xMidYMid meet" role="img">
<line x1="0" y1="172" x2="400" y2="172" class="ax"/>
<rect x="28.5" y="110" width="27" height="62" rx="3" class="f-g2"/><rect x="59.5" y="98" width="27" height="74" rx="3" class="f-g4"/><text x="42" y="103" text-anchor="middle">62</text><text x="73" y="91" text-anchor="middle" class="v">74</text><text x="57.5" y="192" text-anchor="middle">1분기</text>
<rect x="123.5" y="102" width="27" height="70" rx="3" class="f-g2"/><rect x="154.5" y="84" width="27" height="88" rx="3" class="f-g4"/><text x="137" y="95" text-anchor="middle">70</text><text x="168" y="77" text-anchor="middle" class="v">88</text><text x="152.5" y="192" text-anchor="middle">2분기</text>
<rect x="218.5" y="106" width="27" height="66" rx="3" class="f-g2"/><rect x="249.5" y="75" width="27" height="97" rx="3" class="f-g4"/><text x="232" y="99" text-anchor="middle">66</text><text x="263" y="68" text-anchor="middle" class="v">97</text><text x="247.5" y="192" text-anchor="middle">3분기</text>
<rect x="313.5" y="91" width="27" height="81" rx="3" class="f-g2"/><rect x="344.5" y="44" width="27" height="128" rx="3" class="f-a"/><text x="327" y="84" text-anchor="middle">81</text><text x="358" y="37" text-anchor="middle" class="va t14">128</text><text x="342.5" y="192" text-anchor="middle" class="v">4분기</text>

</svg></div>
<p class="lg"><span><i class="c-g2"></i>지난해</span><span><i class="c-g4"></i>올해</span><span><i class="c-a"></i>올해 4분기</span></p>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

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