반폭 · 구성 도넛과 값 범례(3~4조각)

전체가 몇 가지로 나뉘는지(유입 경로, 연령대, 매체 구성)를 절반 칸에서 보일 때. 조각 3~4개, 큰 순서로 12시 방향부터. 강조색은 말하려는 조각 하나. 범례 이름 9자 이내. 5조각 이상이면 반폭 수평 막대를 사용. 값 바꾸는 법: 원 둘레 402.1(반지름 64). 조각 길이 = 비율 ÷ 100 × 402.1. 각 circle 의 stroke-dasharray = "(길이 − 2) (402.1 − 길이 + 2)", stroke-dashoffset = −(앞 조각 길이 합계). 색 class 는 큰 순서로 s-a, s-g4, s-g2, s-g1(3조각이면 s-g2 를 뺀다). 가운데 text.tot = 합계 수치, 그 아래 text = 단위 이름. 오른쪽 li 는 조각과 같은 순서로 이름과 비율, 강조 행에 class="hot".

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Part-to-whole 분류와 Datawrapper Academy(https://academy.datawrapper.de)의 도넛 안내(조각 수 제한, 큰 순서 정렬, 값은 범례에 직접 표기)를 참고. 직접 제작.

<div class="dk dkh dkh-g-donut"><div class="dk-card"><p class="dk-lb">유입 경로별 전환 구성 · 최근 3개월</p>
<div class="row"><div class="cv"><svg width="100%" viewBox="0 0 170 170" preserveAspectRatio="xMidYMid meet" role="img">
<circle cx="85" cy="85" r="64" class="s-a" stroke-dasharray="166.9 235.2" stroke-dashoffset="0" transform="rotate(-90 85 85)"/>
<circle cx="85" cy="85" r="64" class="s-g4" stroke-dasharray="110.6 291.5" stroke-dashoffset="-168.9" transform="rotate(-90 85 85)"/>
<circle cx="85" cy="85" r="64" class="s-g2" stroke-dasharray="74.4 327.7" stroke-dashoffset="-281.5" transform="rotate(-90 85 85)"/>
<circle cx="85" cy="85" r="64" class="s-g1" stroke-dasharray="42.2 359.9" stroke-dashoffset="-357.9" transform="rotate(-90 85 85)"/>
<text x="85" y="90" text-anchor="middle" class="tot">1,240</text><text x="85" y="109" text-anchor="middle">총 전환 건수</text>
</svg></div><ul>
<li class="hot"><i class="c-a"></i><span>체험단 후기 경유</span><b class="num">42%</b></li>
<li><i class="c-g4"></i><span>검색 광고</span><b class="num">28%</b></li>
<li><i class="c-g2"></i><span>SNS 광고</span><b class="num">19%</b></li>
<li><i class="c-g1"></i><span>직접 방문·기타</span><b class="num">11%</b></li>
</ul></div>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

.dkh-g-donut .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-donut .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-donut .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-donut .cv{flex:1;min-height:0;position:relative}
.dkh-g-donut .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-donut svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-donut svg .k{fill:var(--ink2)}
.dkh-g-donut svg .v{fill:var(--ink);font-weight:600}
.dkh-g-donut svg .va{fill:var(--ac);font-weight:700}
.dkh-g-donut svg .on{fill:var(--card);font-weight:600}
.dkh-g-donut svg .t14{font-size:14px}
.dkh-g-donut svg .f-a{fill:var(--ac)}
.dkh-g-donut svg .f-w{fill:var(--acw)}
.dkh-g-donut svg .f-s{fill:var(--soft)}
.dkh-g-donut svg .f-c{fill:var(--card)}
.dkh-g-donut svg .f-g1{fill:var(--g1)}
.dkh-g-donut svg .f-g2{fill:var(--g2)}
.dkh-g-donut svg .f-g3{fill:var(--g3)}
.dkh-g-donut svg .f-g4{fill:var(--g4)}
.dkh-g-donut svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-donut svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dkh-g-donut .row{flex:1;min-height:0;display:flex;gap:22px;align-items:stretch}
.dkh-g-donut .row .cv{flex:0 0 43%}
.dkh-g-donut svg circle{fill:none;stroke-width:22}
.dkh-g-donut svg .s-a{stroke:var(--ac)}
.dkh-g-donut svg .s-g1{stroke:var(--g1)}
.dkh-g-donut svg .s-g2{stroke:var(--g2)}
.dkh-g-donut svg .s-g4{stroke:var(--g4)}
.dkh-g-donut svg .tot{font-size:30px;font-weight:700;fill:var(--ink);letter-spacing:-1px}
.dkh-g-donut ul{flex:1;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center}
.dkh-g-donut li{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2)}
.dkh-g-donut li:first-child{border-top:0}
.dkh-g-donut li i{flex:none;width:10px;height:10px;border-radius:2px}
.dkh-g-donut li span{flex:1;min-width:0}
.dkh-g-donut li b{font-size:var(--f-body);font-weight:700}
.dkh-g-donut li.hot span{color:var(--ink);font-weight:600}
.dkh-g-donut li.hot b{color:var(--ac)}
.dkh-g-donut .c-a{background:var(--ac)}
.dkh-g-donut .c-g1{background:var(--g1)}
.dkh-g-donut .c-g2{background:var(--g2)}
.dkh-g-donut .c-g4{background:var(--g4)}