데이터 시각화

Donut

전체 대비 구성비를 보여줍니다. 가운데에 합계를 두고, 조각이나 범례에 마우스를 올리면 해당 항목의 비중과 금액으로 바뀝니다.

D3 모듈
pie · arc (padAngle · cornerRadius)
등장
시계 방향 sweep 900ms

결제 수단 비중

총 결제액9810만원
주문 유형100%

스펙

요소값
조각 간격padAngle 0.012rad · cornerRadius 3
두께size × 0.14 권장 (200px → 28px)
hover조각 바깥으로 4px 확장, 나머지 opacity 0.3
정렬데이터 순서 유지 (sort null) — 큰 값 순으로 넘기세요

사용 규칙

이렇게 하세요

  • 조각 5개 이하 (나머지는 ‘기타’)
  • 범례에 비율과 금액을 함께
  • 큰 값부터 12시 방향 시계 방향으로

이렇게 하지 마세요

  • 시간 추이 비교에 여러 개의 도넛
  • 3D · 분리된(explode) 조각
  • 합계가 100%가 아닌 데이터

Props

PropTypeDefault설명
data*{ key; label; value; color? }[]—구성 항목
size · thicknessnumber200 · 28지름 · 링 두께
centerLabelstring"총 결제액"가운데 라벨
legend"right" | "bottom" | "none""right"범례 위치