Pie Chart - SingleDonut¶
목적¶
U4A Workspace에서 PieChart를 사용하여 SingleDonut 차트를 구현하는 방법을 설명
이 매뉴얼은 초보 사용자를 위해 작성되었으며, 단계별 설명과 함께 필수적인 기능과 설정을 다룸
주요 단계¶
1. PieChart 추가¶
1.1. PAGE에서 UI Object 추가 버튼 클릭¶
<사진 1> PAGE 추가 버튼 클릭 화면
1.2. Aggregation Name에 "content" 선택¶
<사진 2> Aggregation Name에 "content" 선택 화면
1.3. UI Object에 "PieChart" 입력¶
<사진 3> UI Object에 "PieChart" 입력 화면
1.4. "PieChart" 선택 후 확인 버튼 클릭¶
<사진 4> "PieChart" 선택 후 버튼 클릭 화면
2. PieChartContent 설정¶
2.1. PIECHART1에서 UI Object 추가 버튼 클릭¶
<사진 5> "PieChart1" 추가 버튼 클릭 화면
2.2. Aggregation Name에 "pieChartContent" 입력¶
<사진 6> Aggregation Name에 "pieChartContent" 입력 화면
2.3. innerRadius 값을 30으로 입력¶
<사진 7> innerRadius 값을 30으로 입력 화면
3. PieSeries 추가¶
3.1. PIECHARTCONTENT1에서 UI Object 추가 버튼 클릭¶
<사진 8> "pieChartContent" 추가 버튼 클릭 화면
3.2. Aggregation Name에 "pieSeries" 입력¶
<사진 9> Aggregation Name에 "pieSeries" 입력 화면
3.3. "PieSeries" 선택 후 확인 버튼 클릭¶
<사진 10> "PieSeries" 선택 후 확인 버튼 클릭 화면
4. 첫 번째 PieSeries 값 입력¶
4.1. value 값을 70으로 입력¶
<사진 11> PieSeries value 값을 70 입력 화면
4.2. categoryText에 "category1" 입력¶
<사진 12> categoryText에 "category1" 입력 화면
5. 두 번째 PieSeries 추가¶
5.1. PIECHARTCONTENT1에서 UI Object 추가 버튼 클릭¶
<사진 13> "pieChartContent" 아래에 있는 추가 버튼 클릭 화면
5.2. Aggregation Name에 "pieSeries" 입력¶
<사진 14> Aggregation Name에 "pieSeries" 입력 화면
5.3. "PieSeries" 선택 후 확인 버튼 클릭¶
<사진 15> "PieSeries" 선택 후 확인 버튼 클릭 화면
6. 두 번째 PieSeries 값 입력¶
6.1. value 값을 30으로 입력¶
<사진 16> value 값 적용 결과 화면
6.2. PIESERIES2의 categoryText에 "category2" 입력¶
<사진 17> categoryText 입력 화면
<사진 18> categoryText 적용 결과 화면
7. Title 추가¶
7.1. PIECHART1에서 UI Object 추가 버튼 클릭¶
<사진 19> Title 추가 버튼 클릭 화면
7.2. Aggregation Name에 "title" 입력¶
<사진 20> Aggregation Name에 "title" 입력 화면
7.3. "Title" 선택 후 확인 버튼 클릭¶
<사진 21> "Title" 선택 후 확인 버튼 클릭 화면
8. Title 텍스트 입력¶
8.1. text 값을 "70%"로 입력¶
<사진 22> text 값 입력 화면
9. Title 스타일 설정¶
9.1. fontSize 값을 45로 입력¶
<사진 23> fontSize 값 입력 화면
9.2. fontWeight 값을 "bold"로 입력¶
<사진 24> fontWeight 값 입력 화면
10. Title 위치 설정¶
10.1. x 값을 "50%"로 입력¶
<사진 25> x 값 입력 화면
10.2. y 값을 "50%"로 입력¶
<사진 26> y 값 입력 화면
10.3. cenerX 값을 "50%"로 입력¶
<사진 27> cenerX 값 입력 화면
11. Application 실행¶
11.1. Application Activate¶
<사진 28> Application Activate 화면
11.2. Application Execution¶
<사진 29> Application Execution 화면
11.3. 결과 화면 확인¶
<사진 30> 결과 화면