Radar Chart - Common¶
목적¶
RadarChart는 다차원 데이터를 방사형 형태로 시각화하여 변수 간 관계를 비교하는 그래프로, RadarChart를 구성하는 UI 요소와 Properties, Aggregations을 설명함
주요 단계¶
1. UI 생성 - RadarChart¶
o RadarChart는 다차원 데이터를 방사형 형태로 표현하는 UI
<사진 1> RadarChart UI
<사진 2> RadarChart UI 적용된 미리보기 화면
1.1. 주요 Properties¶
<사진 3> RadarChart UI Properties
| Names | Description |
|---|---|
| visible | 차트 표시 유무 |
| width | 차트 구성 영역 너비 |
| height | 차트 구성 영역 높이 |
| radius | 차트 반지름 크기 조정 |
| innerRadius | 내부 반지름 크기 조정 |
| startAngle | 차트의 시작 각도 |
| endAngle | 차트의 끝 각도 |
| rotate | RadarChart 축 반전 |
1.2. 주요 aggregation¶
<사진 4> RadarChart UI Aggregation
| Name | Description |
|---|---|
| categoryAxis | 실제 차트 구성 내용 |
| background | 차트 배경 설정(색상 등) |
| legend | 범례 생성 여부 (Legend 문서 참조 - Detail) |
| title | 차트 제목 생성 (Title 문서 참조 - Detail) |
2. UI - RadarCategoryAxis 생성¶
o RadarCategoryAxis는 RadarChart의 각 항목이 배치되는 방사형 축을 설정하는 UI
<사진 5> RadarCategoryAxis UI
<사진 6> RadarCategoryAxis UI 적용된 미리보기 화면
2.1. RadarCategoryAxis 주요 Properties¶
<사진 7> CategoryAxis UI Properties
| Names | Description |
|---|---|
| visible | 각도 축 표시 여부 |
| stroke | 각도 축 선 색상 설정 |
| strokeOpacity | 각도 축 선 투명도 설정 |
| strokeWidth | 각도 축 선 두께 설정 |
| strokeDashArray | 각도 축 선 점선 설정 |
| radius | 각도 축 반지름 크기 조정 |
2.2. CategoryAxis 주요 Aggregation¶
<사진 8> CategoryAxis UI Aggregation
| Name | Description |
|---|---|
| guideLineRanges | 가이드라인 설정 |
| ValueAxis | 반지름 구성 설정 |
| seriesSetting | 차트 데이터 표시 형태 설정 (Bar 또는 Line 선택 가능) |
| categoryItems | 차트 데이터 설정 |
3. UI - RadarValueAxis 생성¶
o RadarValueAxis는 RadarChart의 값(Value)을 표현하는 반지름 축을 설정하는 UI
<사진 9> RadarValueAxis UI
<사진 10> RadarValueAxis UI 미리보기 화면
3.1. ValueAxis UI Properties¶
<사진 11> RadarValueAxis UI Properties
| Names | Description |
|---|---|
| visible | 반지름 축 표시 여부 |
| stroke | 반지름 축 선 색상 설정 |
| strokeWidth | 반지름 축 선 두께 설정 |
| strokeDashArray | 반지름 축 선 점선 설정 |
| max | 최대값 설정 |
| min | 최소값 설정 |
| axisAngle | 축 위치 각도 설정 |
3.2. RadarValueAxis UI Aggregation¶
<사진 12> RadarValueAxis UI Aggregations
| Name | Description |
|---|---|
| guideLineRanges | 가이드라인 설정 |
| LabelStyle | 축 Label Style 설정 |
| grid | 반지름 축 영역 설정 |
| title | 반지름 축 제목 설정 |
| clockHands | 축 핸들 설정 |
4. UI - RadarSeriesSetting 생성¶
<사진 13> RadarSeriesSetting UI
4.1. RadarSeriesSetting UI Aggregations¶
o RadarSeriesSetting은 차트 데이터의 그래프 형태를 막대(Bar) 또는 선(Line)으로 설정할 수 있는 Aggregation
<사진 14> RadarSeriesSetting Aggregations
| Name | Description |
|---|---|
| bars | 바 차트 형태 설정 |
| lines | 선 차트 형태 설정 |
5. UI - RadarCategoryItem 생성¶
o RadarCategoryItem은 차트에서 막대 및 선 그래프의 데이터를 집계하기 위한 항목
<사진 15> RadarCategoryItem UI
5.1. RadarCategoryItem 주요 Properties¶
<사진 16> RadarCategoryItem Properties
| Name | Description |
|---|---|
| categoryText | 카테고리 항목 텍스트 |
5.2. RadarCategoryItem UI Aggregations¶
o RadarCategoryItem은 SeriesSetting에 설정된 순서에 맞춰 데이터를 적용
<사진 17> RadarCategoryItem Aggregations
| Name | Description |
|---|---|
| barItems | 바 차트 항목 설정 |
| lineItems | 라인 차트 항목 설정 |
6. 막대 그래프 또는 선 그래프 적용하기¶
o RadarSeriesSetting, RadarCategoryItem의 Aggregation 설정에 따라 막대 또는 선 그래프를 설정 가능하며, 해당 내용은 막대 그래프 및 선 그래프 상세 문서에서 제공
6.1. RadarChart - Bar : Detail¶
<사진 18> RadarChart - Bar 미리보기 화면
6.2. RadarChart - Line : Detail¶
<사진 19> RadarChart - Line 미리보기 화면
6.3. Gauge Chart : Detail¶
<사진 20> Gague Chart 미리보기 화면
추가 정보¶
o UI의 추가적인 Properties 정보는 UI Properties의 각 Property 명칭을 클릭하면 상세 설명을 확인할 수 있음