레이더 차트 소개
레이더 차트는 저차원 데이터를 원형 형식으로 그리는 간단한 방법입니다.
레이더 차트는 거미 차트, 별 차트, 거미줄 차트, 극좌표 차트라고도 합니다.
응용
레이더 차트는 데이터를 원형 형식으로 명확하고 간결하게 표현해야 하는 개발자, 데이터 과학자 및 엔지니어에게 특히 유용합니다.
일반적으로 여러 엔티티가 여러 차원에서 보이는 성과를 그래픽으로 요약하고 비교하는 데 사용됩니다.
문법
복사
임베드
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
예시
복사
임베드
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
문법 세부 사항
제목
title: 레이더 차트 상단에 렌더링됩니다.
복사
임베드
radar-beta
title Title of the Radar Diagram
...
축
axis: axis 문법은 레이더 차트의 축을 정의하는 데 사용됩니다.
각 축은 하나의 ID 와 선택적 레이블로 표현됩니다.
한 줄에 여러 축을 정의할 수 있습니다.
복사
임베드
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
곡선
curve: curve 문법은 레이더 차트의 곡선 데이터 포인트를 정의하는 데 사용됩니다.
각 곡선은 하나의 ID, 선택적 레이블 및 값 목록으로 표현됩니다.
값은 숫자 목록 또는 키-값 쌍 목록으로 정의할 수 있습니다. 키-값 쌍을 사용하면 키는 축 ID를 나타내고 값은 데이터 포인트를 나타냅니다.
한 줄에 여러 곡선을 정의할 수 있습니다.
복사
임베드
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
옵션
- showLegend: showLegend 문법은 레이더 차트의 범례를 표시하거나 숨기는 데 사용되며, 기본적으로 표시됩니다.
- max: 레이더 차트의 최댓값으로, 레이더 차트를 스케일링하는 데 사용됩니다. 제공하지 않으면 데이터 포인트에서 최댓값을 계산합니다.
- min: 레이더 차트의 최솟값으로, 레이더 차트를 스케일링하는 데 사용됩니다. 제공하지 않으면 최솟값은 0입니다.
- graticule: graticule 문법은 레이더 차트에 렌더링할 경위선 유형을 정의하는 데 사용됩니다. 경위선은 circle 또는 polygon 일 수 있습니다. 제공하지 않으면 기본값은 circle 입니다.
- ticks: ticks 문법은 경위선의 눈금 수를 정의하는 데 사용됩니다. 그려지는 동심원 또는 다각형의 수이며, 레이더 차트의 비율을 나타내는 데 사용됩니다. 제공하지 않으면 기본 눈금 수는 5입니다.
복사
임베드
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
구성
| 매개변수 | 설명 | 기본값 |
|---|---|---|
| width | 레이더 차트의 너비 | 600 |
| height | 레이더 차트의 높이 | 600 |
| marginTop | 레이더 차트의 위쪽 여백 | 50 |
| marginBottom | 레이더 차트의 아래쪽 여백 | 50 |
| marginLeft | 레이더 차트의 왼쪽 여백 | 50 |
| marginRight | 레이더 차트의 오른쪽 여백 | 50 |
| axisScaleFactor | 좌표축의 스케일 인자 | 1 |
| axisLabelFactor | 좌표축 레이블 위치를 조정하는 인자 | 1.05 |
| curveTension | 둥근 곡선의 장력 | 0.17 |
테마 변수
전역 테마 변수
이러한 변수의 기본값은 사용된 테마에 따라 다릅니다. 기본값을 덮어쓰려면 구성의 themeVariables 섹션에서 원하는 값을 설정하세요: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
레이더 차트는 색상 스케일 cScale${i} 를 지원하며, 여기서 i 는 0부터 테마 색상 스케일의 최대 색상 수까지의 숫자입니다. 일반적으로 최대 색상 수는 12입니다.
| 속성 | 설명 |
|---|---|
| fontSize | 제목의 글꼴 크기 |
| titleColor | 제목 색상 |
| cScale$ | i번째 곡선의 색상 스케일 |
레이더 스타일 옵션
레이더의 특정 변수는 radar 키 안에 있습니다. 레이더 스타일 옵션을 설정하려면 다음 문법을 사용하세요. config: themeVariables: radar: axisColor: "#FF0000"
| 속성 | 설명 | 기본값 |
|---|---|---|
| axisColor | 좌표축 선의 색상 | black |
| axisStrokeWidth | 좌표축 선의 너비 | 1 |
| axisLabelFontSize | 좌표축 레이블의 글꼴 크기 | 12px |
| curveOpacity | 곡선 투명도 | 0.7 |
| curveStrokeWidth | 곡선 너비 | 2 |
| graticuleColor | 경위선 색상 | black |
| graticuleOpacity | 경위선 투명도 | 0.5 |
| graticuleStrokeWidth | 경위선 너비 | 1 |
| legendBoxSize | 범례 상자의 크기 | 10 |
| legendFontSize | 범례의 글꼴 크기 | 14px |
구성 및 테마 예시
복사
임베드
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
