XY Chart - Common¶
목적¶
XYChart는 데이터를 X축과 Y축을 기준으로 시각화하는 그래프로, 차트를 구성하는 UI 설명
주요 단계¶
1. UI 생성 - XYChart¶
<사진 1> XYChart UI
<사진 2> XYChart UI 적용된 미리보기 화면
1.1. 주요 Properties¶
<사진 3> XYChart Properties
| Names | Description |
|---|---|
| visible | 차트 표시 유무 |
| width | 차트 구성 영역 너비 |
| height | 차트 구성 영역 높이 |
| blur | 차트 불투명도 |
| cursorOverStyle | 차트 위에 마우스포인트 올려둘 시 설정한 마우스 아이콘 변경 |
| rotate | xy축 chart 반전 |
| forceinactive | 'true'시 events 진행 안함 |
| forcehidden | 'true' 설정시 차트 숨김 (visible 속성보다 우선 적용) |
1.2. 주요 Aggregation¶
<사진 4> XYChart UI Aggregation
| Name | Description |
|---|---|
| categoryAxis | 실제 차트 구성 내용 |
| background | 차트 배경 설정(색상 등) |
| plotBackground | 차트 영역 배경 설정 |
| scrollbarX | 차트 좌우 스크롤 생성 |
| scrollbarY | 차트 상하 스크롤 생성 |
| legend | 범례 생성 여부 (Legend 문서 참조 - Detail) |
| title | 차트 제목 생성 (Title 문서 참조 - Detail) |
| zoomOutButton | 차트 확대/축소 기능 제공 |
2. UI - CategoryAxis 생성¶
CategoryAxis는 XYChart의 X축을 설정하는 UI
<사진 5> CategoryAxis UI
<사진 6> CategoryAxis UI 적용된 미리보기 화면
2.1. CategoryAxis 주요 Properties¶
<사진 7> CategoryAxis UI Properties
| Names | Description |
|---|---|
| visible | X축 표시 유무 |
| blur | X축 불투명도 |
| cursorOverStyle | X축에 포인트 올려둘 시 설정한 마우스 아이콘 변경 |
| stroke | X축 라인 색상 |
| strokeWidth | X축 라인 굵기 |
| strokeDashArray | X축 라인 점선 간격 |
2.2. CategoryAxis 주요 Aggregation¶
<사진 8> CategoryAxis UI Aggregation
| Name | Description |
|---|---|
| guideLineRanges | XYChart 가이드라인 설정 |
| ValueAxis | Y축 구성 설정 |
| seriesSetting | 차트 데이터 표시 형태 설정 (Bar 또는 Line 선택 가능) |
| categoryItems | 차트 데이터 설정 |
| title | X축 title 생성 |
3. UI - ValueAxis 생성¶
ValueAxis는 Y축을 설정하며, 차트의 수직 방향 데이터 표현을 담당
<사진 9> ValueAxis UI
<사진 10> ValueAxis UI 미리보기 화면
3.1. ValueAxis UI Properties¶
<사진 11> ValueAxis UI Properties
| Names | Description |
|---|---|
| visible | Y축 표시 유무 |
| blur | Y축 불투명도 |
| cursorOverStyle | Y축에 포인트 올려둘 시 설정한 마우스 아이콘 변경 |
| stroke | Y축 라인 색상 |
| strokeWidth | Y축 라인 굵기 |
| strokeDashArray | Y축 라인 점선 간격 |
3.2. ValueAxis UI Aggregation¶
<사진 12> ValueAxis UI Aggregations
| Name | Description |
|---|---|
| guideLineRanges | XYChart Y축 가이드라인 설정 |
| LabelStyle | Y축 라벨 설정 |
| grid | Y축 가로 배경선 설정 |
| title | Y축 제목 설정 |
4. UI - SeriesSetting 생성¶
<사진 13> SeriesSetting UI
4.1. SeriesSetting UI Aggregations¶
- SeriesSetting은 차트 데이터의 그래프 형태를 막대(Bar) 또는 선(Line)으로 설정할 수 있는 Aggregation
<사진 14> SeriesSetting Aggregations
| Name | Description |
|---|---|
| bars | Bar 그래프 설정 |
| lines | Line 그래프 설정 |
5. UI - CategoryItem 생성¶
- CategoryItem은 차트에서 막대 및 선 그래프의 데이터를 집계하기 위한 항목
<사진 15> CategoryItem UI
5.1. CategoryItem 주요 Properties¶
<사진 16> CategoryItem Properties
| Name | Description |
|---|---|
| categoryText | 카테고리에 출력할 값 설정 |
5.2. CategoryItem UI Aggregations¶
- CategoryItem은 SeriesSetting에 설정된 순서에 맞춰 데이터를 적용
<사진 17> CategoryItem Aggregations
| Name | Description |
|---|---|
| barItems | 막대 그래프 데이터 설정 |
| lineItems | 선 그래프 데이터 설정 |
6. 막대 그래프 또는 선 그래프 적용하기¶
- CategoryItem, SeriesSetting의 Aggregation 설정에 따라 막대 또는 선 그래프 설정 가능
- 해당 내용은 막대 그래프 및 선 그래프 상세 문서에서 제공
6.1. 막대 그래프 - Detail¶
<사진 18> 막대 그래프 형태 미리보기 화면
6.2. 선 그래프 - Detail¶
<사진 19> 라인 그래프 형태 미리보기 화면
추가 정보¶
- UI의 추가적인 Properties 정보는 UI Properties의 각 Property 명칭을 클릭하여 설명 확인 가능