PieChart

한눈에#

파이/도넛 차트는 부분-전체(part-to-whole) 관계를 슬라이스 각도로 보여줍니다. 전체에서 각 범주가 차지하는 비율이 한눈에 들어오죠. 도넛은 중앙 구멍에 합계나 핵심 수치를 둘 수 있습니다.

총 방문10,000

• 직접 방문42%
• 검색31%
• 소셜18%
• 추천9%

트래픽 소스 구성

범주	값	비율
직접 방문	4,200	42%
검색	3,100	31%
소셜	1,800	18%
추천	900	9%

• 파이 · 도넛 2변형
• 도넛 중앙 합계/라벨
• 색맹 안전 차트 토큰
• 범주×값×% sr-only 표

도넛 중앙에 합계를 두면 비율과 절대값을 함께 읽힙니다

파이 vs 도넛#

같은 데이터를 형태만 바꿉니다. 도넛은 중앙 여백으로 합계·아이콘을 둘 수 있어 대시보드에서 선호되고, 파이는 가장 단순한 비례 표현입니다.

• 데스크톱58%
• 모바일34%
• 태블릿8%

기기 비율(파이)

범주	값	비율
데스크톱	58	58%
모바일	34	34%
태블릿	8	8%

파이 (pie)

100

• 데스크톱58%
• 모바일34%
• 태블릿8%

기기 비율(도넛)

범주	값	비율
데스크톱	58	58%
모바일	34	34%
태블릿	8	8%

도넛 (donut)

언제 쓰나 — 그리고 주의#

비례 차트는 범주가 적고(보통 ≤6) 비율 자체가 메시지일 때 효과적입니다. 각도 비교는 길이 비교(막대)보다 부정확하므로, 범주가 많거나 정밀 비교가 필요하면 BarChart를 쓰세요. WDS PieChart는 이 한계를 보완하려 범례·표에 % 수치를 항상 병기합니다(각도에만 의존하지 않음).

음수·0 값은 part-to-whole에 의미가 없어 기여 0(0폭 슬라이스)으로 처리하고, 합계가 0이면 옅은 빈 링만 그립니다.

아키텍처 — 각도는 공유, 호는 네이티브#

슬라이스 각도 계산(computePieSlices)은 웹·Flutter가 공유하는 순수 코어(fixture 패리티로 핀)입니다. 하지만 호(arc) 렌더는 SVG(웹)와 Canvas(Flutter)가 각각 네이티브로 그립니다 — Flutter의 SVG path 파서가 호 A 명령을 지원하지 않기 때문입니다. 같은 각도를 받아 그리므로 두 플랫폼 슬라이스가 정렬됩니다.

접근성#

• 파이는 각도 비교가 어려워(SC 1.4.1 관련) 범주×값×비율 표가 정본입니다 — sr-only <table>로 노출하고 SVG는 aria-hidden.
• 색에만 의존하지 않습니다 — 범례·표가 범주명을 텍스트로 담습니다(채널 분리).
• label은 필수 prop입니다(차트는 데이터).

토큰#