Components
Donut Chart
전체 대비 비중을 보여주는 원형 차트입니다. conic-gradient 하나로 그려지는 실물 — 차트 라이브러리가 없습니다.
62%셀프 완결
- 셀프 완결62%
- 상담사 연결38%
위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.
코드 보기
<div class="tn-donut" style="--val:62">
<div class="dv">62%<small>셀프 완결</small></div>
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 단일 값 | --val 커스텀 프로퍼티 하나로 각도 결정 | 38% |
| 다중 분할 | inline conic-gradient로 세그먼트 나열 | 3분할 |
| 레전드 결합 | 우측에 tn-legend — 색칩 + 레이블 + 값 |
|
Guidelines
✓ Do
- 중심에 핵심 숫자 1개만 (보조 레이블은 small)
- 세그먼트는 4개 이내
- 값은 반드시 레전드나 중심 텍스트로 병기 (색만으로 전달 금지)
✕ Don't
- 3D·그림자·입체 효과 금지
- 비중이 아닌 데이터(추이·순위)에 쓰지 않는다 — 그건 Bar Chart
- 파이 조각 분리(explode) 금지
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
크기 | 120px (인라인 64~88px) | |
두께 | inset 14px 링 | |
각도 | --val × 1% conic | CSS 커스텀 프로퍼티 |
중심 값 | 1.02rem · 650 |
비교
Insight 대시보드 '처리 유형' 실물에서 추출. Donut vs Progress Circle — 진행률(한 값의 완료도)은 Progress Circle, 구성비(여러 부분의 합=100%)는 Donut.