RadarChart

한눈에#

RadarChart는 여러 지표(축)를 가진 항목을 방사형 폴리곤으로 겹쳐 비교합니다. 각 축은 하나의 변수이고, 시리즈는 축마다의 값을 이은 면적입니다 — 어느 항목이 어떤 축에서 강한지가 모양으로 드러납니다.

어떻게 동작하나#

정점 좌표는 순수 코어 computeRadarVertices가 계산합니다(ADR-018, Flutter wiz_charts 포팅 단위).

• 축 = 12시부터 시계방향 균등 분할 — 값은 value / max로 0(중심)~1(축 끝)에 매핑됩니다.
• ★호(arc)가 없어 좌표까지 공유 — 폴리곤은 직선(코너 점)뿐이라 웹 SVG와 Flutter Canvas가 같은 좌표를 그립니다(파이/게이지의 호 분리와 달리 렌더 코드도 공유 가능).
• 시리즈 겹침 — 색맹 안전 차트 토큰(--wds-chart-N)으로 반투명 채움 + 외곽선 + 정점. 여러 시리즈를 겹쳐 강·약점을 대조합니다.
• 격자 링(폴리곤)과 상단 축의 레벨 값으로 스케일을 읽습니다.

사용#

<RadarChart
  axes={['성능', '안정성', '디자인', '가격', '지원']}
  max={100}
  label="제품 비교"
  series={[
    { label: '제품 A', values: [90, 70, 85, 55, 75] },
    { label: '제품 B', values: [60, 88, 65, 90, 70] },
  ]}
/>;

max(미지정 시 데이터 nice 천장)·levels(격자 링 수, 기본 4)·size(기본 300)로 조정합니다. 축은 3개 이상이어야 폴리곤이 그려집니다(2개 이하는 표만).

접근성#

방사형 면적 비교는 어려우므로(SC 1.4.1), 축×시리즈 값 표가 정본입니다 — sr-only <table>로 노출하고 SVG는 aria-hidden입니다. 시리즈는 색뿐 아니라 범례 라벨로도 구분됩니다.

토큰#