Gauge chart¶
목적¶
U4A Workspace에서 RadarChart를 사용하여 Gauge차트를 구현하는 방법을 설명한다
이 매뉴얼은 초보 사용자를 위해 작성되었으며, 단계별 설명과 함께 필수적인 기능과 설정을 다룬다
주요 단계¶
1. RadarChart 추가¶
1.1. PAGE에서 UI Object 추가 버튼 선택¶
<사진 1> Page에 UI Object 추가 버튼 선택
1.2. Aggregation Name에서 content 선택 후 Radarchart 입력 및 선택¶
<사진 2> Radarchart 선택 화면
1.3. RadarChart 선택 후 확인 버튼 클릭¶
<사진 3> Radarchart 추가 화면
2. RadarChart Property 설정¶
2.1. endAngle 값을 0으로 설정¶
o RadarChart 속성 중 endAngle 값을 0으로 설정하여 종료 각도를 지정
<사진 4> RadarChart endAngle "0" 설정 화면
2.2. startAngle 값을 -180으로 설정¶
o RadarChart의 시작 각도를 -180으로 변경하여 반원 형태 조정
<사진 5> RadarChart startAngle "-180" 설정 화면
2.3. rotate 값을 true로 변경¶
<사진 6> RadarChart rotate "true" 설정 화면
3. categoryAxis 추가¶
3.1. RadarChart에 UI Object 추가 버튼 선택¶
<사진 7> RadarChart에 UI Object 추가 버튼 선택
3.2. RadarcategoryAxis를 선택 후 확인 버튼 클릭¶
<사진 8> RadarcategoryAxis 추가 화면
4. RadarValueAxis 추가¶
4.1. RadarCategoryAxis에 UI Object 추가 버튼 선택¶
<사진 9> RadarcategoryAxis에 UI Object 추가 버튼 선택
4.2. Aggregation Name에서 valueAxis를 선택¶
<사진 10> valueAxis 선택 화면
4.3. RadarValueAxis를 선택 후 확인 버튼 클릭¶
<사진 11> valueAxis 추가 화면
5. RadarValueAxis 속성 설정¶
5.1. max에 100 입력¶
o max 값을 100으로 설정하여 최대 범위를 지정
<사진 12> RadarValueAxis Property max "100" 설정 화면
5.2. min에 0 입력¶
o min 값을 0으로 설정하여 최소 범위를 지정
<사진 13> RadarValueAxis Property min "0" 설정 화면
6. ClockHand 추가¶
6.1. RadarValueAxis에 UI Object 추가 버튼 선택¶
<사진 14> RadarValueAxis에 UI Object 추가 버튼 선택
6.2. Aggregation Name에서 clockHands를 선택¶
<사진 15> clockHands 선택 화면
6.3. ClockHand를 선택 후 확인 버튼 클릭¶
<사진 16> clockHand 추가 화면
<사진 17> ClockHand 적용된 화면
7. ClockHand Property 설정¶
7.1. ClockHand 속성에서 value 값을 20으로 설정¶
o Clock Hand 속성에서 value 값을 20으로 설정하여 Gauge의 포인터 방향을 조정
<사진 18> ClockHand Value 값 변경에 따른 ClockHand 방향 변경된 화면
8. GuideLineRange 추가¶
o Gauge차트의 특정 값 구간을 시각적으로 구분하는 역할
8.1. RadarValueAxis에 UI Object 추가 버튼 선택¶
<사진 19> RadarValueAxis에 UI Object 추가 버튼 선택
8.2. Aggregation Name에서 guideLineRanges 선택¶
<사진 20> guideLineRanges 선택 화면
8.3. GuideLineRange 선택 후 확인 버튼 클릭¶
<사진 21> guideLineRanges 추가 화면
9. GuideLineRange 속성 설정¶
o indexFrom, indexTo 속성 설정으로 GuideLineRange의 구간 설정
9.1. indexFrom 값을 0으로 설정¶
<사진 22> guideLineRanges indexFrom "0" 설정 화면
9.2. indexTo 값을 40으로 설정¶
<사진 23> guideLineRanges indexTo "40" 설정 화면
10. AxisFill 추가¶
10.1. GuideLineRange에 UI Object 추가 버튼 선택¶
<사진 24> GuideLineRange에 UI Object 추가 버튼 선택
10.2. AxisFill 선택 후 확인 버튼 클릭¶
<사진 25> AxisFill 추가 화면
11. 지정된 GuideLineRange 영역의 속성설정¶
11.1. Axis Fill 속성에서 fill 값을 'green'으로 설정하여 지정된 영역을 강조¶
<사진 26> 지정된 GuideLineRange 영역 구간에 색상 설정이 적용된 화면
12. Application 활성화 및 Web 화면 확인¶
12.1. 상단에 있는 Active 버튼 클릭 후 Application Execution 버튼 클릭¶
<사진 27> Application Activate 진행 화면
12.2. 브라우저 창에서 Gauge chart가 표시됨¶
<사진 28> GaugeChart Web 결과 화면