SingleDonutChart¶
목적
Donut 형태의 차트를 활용하여 데이터를 시각적으로 표현하고, 차트 이벤트를 활용하는 방법을 설명
주요 단계**¶
1. SingleDonutChart UI 생성¶
o 원하는 위치에 SingleDonutChart UI를 생성하는 방법 설명
<사진 1> SingleDonutChart UI 설정 화면
1.1. SingleDonutChart UI 속성
| Name | Description |
|---|---|
| fontColor | 내부 텍스트 색상 |
| fontSize | 내부 텍스트 크기 |
| fontX | 내부 텍스트 가로 위치 |
| fontY | 내부 텍스트 세로 위치 |
| height | 차트 높이 |
| innerRadius | 차트 내부 원형 크기 |
| innerText | 차트 중앙에 표시되는 텍스트 |
| sliceColor | 차트 색상 |
| sliceValue | 차트의 특정 색상이 적용될 영역 비율 (0~100) |
| visible | 차트 표시 여부 |
| width | 차트 너비 |
| styleClass | 적용할 CSS 스타일 |
2. SingleDonutChart Property 위치**¶
o 차트 속성 위치 확인
<사진 2> SingleDonutChart Property 위치 화면
3. SingleDonutChart Properties - InnerRadius**¶
o innerRadius 값을 조절하여 DonutChart의 중앙 원 크기를 변경 가능
ㆍ innerRadius 값이 작을수록 내부 원이 작아짐
ㆍ innerRadius 값이 클수록 내부 원이 커짐
<사진 3> InnerRadius 값에 따른 DonutChart 중앙 원 크기 비교 화면
4. SingleDonutChart Properties - fontX 조절**¶
o 내부 텍스트 가로 위치를 조정하는 속성.
ㆍ fontX 값이 50 이하이면 텍스트가 왼쪽으로 이동
ㆍ fontX 값이 50이면 중앙 정렬
ㆍ fontX 값이 50 이상이면 텍스트가 오른쪽으로 이동
<사진 4> SingleDonutChart Properties - fontX 값에 따른 SingleDonutChart 비교 화면
5. SingleDonutChart Properties - fontY 조절**¶
o 내부 텍스트 세로 위치를 조정하는 속성
ㆍ fontY 값이 45 이하이면 텍스트가 위쪽으로 이동
ㆍ fontY 값이 45이면 중앙 정렬
ㆍ fontY 값이 45 이상이면 텍스트가 아래쪽으로 이동
<사진 5> SingleDonutChart Properties - fontY 값에 따른 SingleDonutChart 비교 화면
6. SingleDonutChart Events - clickSlice**¶
o 차트의 외곽 영역을 클릭했을 때 발생하는 이벤트
<사진 6> 차트의 외곽 영역을 클릭시 Event Method에 설정된 메시지 호출 화면
7. SingleDonutChart Events - clickChart**¶
o 차트 내부 영역을 클릭했을 때 발생하는 이벤트
<사진 7> 차트의 내부 영역을 클릭시 Event Method에 설정된 메시지 호출 화면