반폭 · 반원 게이지와 요약 3값

목표 대비 달성률, 점유율, 진행률처럼 0~100% 값 하나를 절반 칸에 크게. 목표선 1개. 아래 요약 값 3개(현재·목표·잔여). 값이 여러 개면 반폭 불릿을 사용. 값 바꾸는 법: 반원 길이 421(반지름 134, 중심 200,164). 채운 호(path.vl)의 stroke-dasharray = "(값 ÷ 100 × 421) 421". 목표 눈금(line.tg)은 t = 목표 ÷ 100 일 때 x = 200 − r × cos(180° × t), y = 164 − r × sin(180° × t) 에서 r = 115 와 153 두 점을 잇는다. 목표 글자는 r = 164 지점(목표가 50 미만이면 text-anchor="end" 로 눈금 왼쪽에). 가운데 text.big = 값, 아래 dl 의 세 값 교체.

Datawrapper Academy(https://academy.datawrapper.de)의 게이지·진행 표시 안내와 대기업 IR 자료의 목표 달성률 표기(반원 + 가운데 수치 + 목표 눈금)를 참고. 직접 제작.

<div class="dk dkh dkh-g-gauge"><div class="dk-card"><p class="dk-lb">상담 신청 목표 달성률 · 3분기 누적</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 190" preserveAspectRatio="xMidYMid meet" role="img">
<path d="M66 164 A134 134 0 0 1 334 164" class="tr"/>
<path d="M66 164 A134 134 0 0 1 334 164" class="vl" stroke-dasharray="303.1 421"/>
<line x1="293" y1="96.4" x2="323.8" y2="74.1" class="tg"/><text x="334.7" y="67.6" class="k">목표 80</text>
<text x="200" y="108" text-anchor="middle">목표 대비 달성률</text><text x="200" y="156" text-anchor="middle" class="big">72<tspan class="u">%</tspan></text><text x="66" y="186" text-anchor="middle">0</text><text x="334" y="186" text-anchor="middle">100</text>
</svg></div>
<dl><div><dt>현재</dt><dd class="num">1,728건</dd></div><div><dt>목표</dt><dd class="num">2,400건</dd></div><div class="hot"><dt>잔여</dt><dd class="num">672건</dd></div></dl>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

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