DashBoard Charts¶
목적¶
대시보드에
PieChart 및 DonutChart를
추가하여 시각화
구성
결과 화면¶
<사진 1> 대시보드에 PieChart 및 DonutChart를 적용한 결과 화면
주요 단계¶
1. Initial Data Setting¶
1.1. Global Type, Data Definition¶
"PieChart types
TYPES: BEGIN OF TY_CHART,
NAME TYPE STRING, "Name.
VAL TYPE STRING, "Value.
END OF TY_CHART.
"SingleDonut types
TYPES: BEGIN OF TY_DONUT,
PERCENT TYPE STRING,
DONUT TYPE TABLE OF TY_CHART WITH EMPTY KEY,
END OF TY_DONUT.
"OutPut DashBoard PieChart
DATA: GT_CHART TYPE TABLE OF TY_CHART.
"OutPut DashBoard SingleDonut
DATA GS_DONUT_1 TYPE TY_DONUT. "Product A.
DATA GS_DONUT_2 TYPE TY_DONUT. "Product B.
DATA GS_DONUT_3 TYPE TY_DONUT. "Product C.
DATA GS_DONUT_4 TYPE TY_DONUT. "Product D.
1.2. Sample PieChart Initial Data Setting¶
DATA: LS_CHART LIKE LINE OF GT_CHART.
DATA: LS_DONUT_VAL TYPE TY_CHART,
LS_DONUT TYPE TY_DONUT.
*--------------------------------------------------------------------*
*--PieChart Data Setting.
LS_CHART-NAME = 'Product A'.
LS_CHART-VAL = '8000'.
APPEND LS_CHART TO GT_CHART.
CLEAR LS_CHART.
LS_CHART-NAME = 'Product B'.
LS_CHART-VAL = '4000'.
APPEND LS_CHART TO GT_CHART.
CLEAR LS_CHART.
LS_CHART-NAME = 'Product C'.
LS_CHART-VAL = '3000'.
APPEND LS_CHART TO GT_CHART.
CLEAR LS_CHART.
LS_CHART-NAME = 'Product D'.
LS_CHART-VAL = '5000'.
APPEND LS_CHART TO GT_CHART.
CLEAR LS_CHART.
1.3. Sample SingleDountChart Initial Data Setting¶
*-- SingledonutChart Data Setting.
Product A Data
LS_DONUT_VAL-NAME = 'Sales'.
LS_DONUT_VAL-VAL = '8000'.
APPEND LS_DONUT_VAL TO GS_DONUT_1-DONUT.
CLEAR LS_DONUT_VAL.
LS_DONUT_VAL-NAME = 'Remain'.
LS_DONUT_VAL-VAL = '2000'.
APPEND LS_DONUT_VAL TO GS_DONUT_1-DONUT.
CLEAR LS_DONUT_VAL.
GS_DONUT_1-PERCENT = '80%'.
Product B data
LS_DONUT_VAL-NAME = 'Sales'.
LS_DONUT_VAL-VAL = '6000'.
APPEND LS_DONUT_VAL TO GS_DONUT_2-DONUT.
CLEAR LS_DONUT_VAL.
LS_DONUT_VAL-NAME = 'Remain'.
LS_DONUT_VAL-VAL = '4000'.
APPEND LS_DONUT_VAL TO GS_DONUT_2-DONUT.
CLEAR LS_DONUT_VAL.
GS_DONUT_2-PERCENT = '60%'.
Product C Data
LS_DONUT_VAL-NAME = 'Sales'.
LS_DONUT_VAL-VAL = '8000'.
APPEND LS_DONUT_VAL TO GS_DONUT_3-DONUT.
CLEAR LS_DONUT_VAL.
LS_DONUT_VAL-NAME = 'Remain'.
LS_DONUT_VAL-VAL = '2000'.
APPEND LS_DONUT_VAL TO GS_DONUT_3-DONUT.
CLEAR LS_DONUT_VAL.
GS_DONUT_3-PERCENT = '80%'.
Product D data
LS_DONUT_VAL-NAME = 'Sales'.
LS_DONUT_VAL-VAL = '6000'.
APPEND LS_DONUT_VAL TO GS_DONUT_4-DONUT.
CLEAR LS_DONUT_VAL.
LS_DONUT_VAL-NAME = 'Remain'.
LS_DONUT_VAL-VAL = '4000'.
APPEND LS_DONUT_VAL TO GS_DONUT_4-DONUT.
CLEAR LS_DONUT_VAL.
GS_DONUT_4-PERCENT = '60%'.
2. PieChart 추가 (DashBoard PieChart)¶
2.1. CARD1 내부 VBOX1에서 UI Object 추가 버튼 클릭¶
<사진 2>
2.2. item 선택 메뉴에서 PieChart 입력 후 선택¶
<사진 3>
3. PieChart의 Title 추가¶
3.1. PIECHART1에 Title UI 추가¶
<사진 4>
4. TITLE1의 text 입력¶
- TITLE1 선택 후
text에 Compare sales by Product 입력
<사진 5>
5. TITLE1 위치 설정¶
5.1. x 값을 50%로 입력¶
<사진 6>
5.2. centerX 값을 50%로 입력¶
<사진 7>
6. PieChart의 Legend 추가¶
6.1. PIECHART1에 Legend UI 추가¶
<사진 8> Legend 추가 화면
<사진 9> Legend 적용된 화면
7. PieChartContent 추가¶
7.1. PIECHART1에 PieChartContent UI 추가¶
<사진 10>
8. PIECHARTCONTENT1의 Property 설정¶
8.1. radius 값을 100%로 변경¶
<사진 11>
9. PIECHARTCONTENT1의 데이터 Binding¶
9.1. pieSeries 옆 Binding 버튼 클릭¶
<사진 12>
9.2. GT_CHART 선택¶
<사진 13>
9.3. Bind 클릭¶
<사진 14>
10. PieSeries 추가¶
10.1. PIECHARTCONTENT1에 PieSeries UI 추가¶
<사진 15>
11. PIESERIES1의 value에 Binding¶
11.1 value 옆 Binding 버튼 클릭¶
<사진 16>
11.2. GT_CHART-VAL 선택¶
<사진 17>
11.3. Bind 클릭¶
<사진 18>
12. PIESERIES1의 categoryText에 Binding¶
12.1 categoryText 옆 Binding 버튼 클릭¶
<사진 19>
12.2. GT_CHART-NAME 선택¶
<사진 20>
12.3. Bind 클릭¶
<사진 21>
13. LabelStyle 추가¶
13.1. PIESERIES1에 PieSeriesLabelStyle UI 추가¶
<사진 22>
14. PIESERIESLABELSTYLE1의 text 데이터 Binding¶
14.1. text 옆 Binding 버튼 클릭¶
<사진 23>
14.2. GT_CHART-NAME 선택¶
<사진 24>
14.3. Bind 클릭¶
<사진 25>
15. PIESERIESLABELSTYLE1의 Property 변경¶
15.1. inside에 true 설정¶
<사진 26>
15.2. textType에 circular 설정¶
<사진 27>
16. DashBoard - PieChart 결과 확인¶
16.1. Application Activate¶
<사진 28>
16.2. Application Execution¶
<사진 29>
16.3. PieChart 결과 화면 확인¶
<사진 30>
17. PieChart 추가 (DashBoard SingleDonutChart)¶
17.1. CARD2 내부 VBOX3을 선택 후, content 옆에 +를 클릭¶
<사진 31>
17.2. PieChart 선택 후 Confirm 버튼 클릭¶
<사진 32>
18. PieChartContent 추가¶
18.1. PIECHART1에 PieChartContent UI 추가¶
<사진 33>
19. PIECHARTCONTENT2의 Property 변경¶
19.1. innerRadius에 60% 입력¶
<사진 34>
19.2. radius에 120% 입력¶
<사진 35>
20. PIECHARTCONTENT2의 데이터 Binding¶
20.1. pieSeries 옆 Binding 버튼 클릭¶
<사진 36>
20.2. GS_DONUT_1-DONUT 선택¶
<사진 37>
20.3. Bind 클릭¶
<사진 38>
21. PieSeries 추가¶
21.1. PIECHARTCONTENT2에 PieSeries UI 추가¶
<사진 39>
22. PIESERIES2의 Property 변경¶
22.1. forceinactive에 true 설정¶
<사진 40>
23. PIESERIES2의 value 데이터 Binding¶
23.1 value 옆 Binding 버튼 클릭¶
<사진 41>
23.2. GS_DONUT_1-DONUT-VAL 선택¶
<사진 42>
23.3. Bind 클릭¶
<사진 43>
24. PIESERIES2의 categoryText 데이터 Binding¶
24.1 categoryText 옆 Binding 버튼 클릭¶
<사진 44>
24.2. GT_CHART-NAME 선택¶
<사진 45>
24.3. Bind 클릭¶
<사진 46>
25. PIESERIESLABELSTYLE2의 Property 변경¶
- 불필요한 PieChart Label을
없애는 방법
25.1. visible에 false 설정¶
- Label이 화면에서 사라짐
<사진 47>
25.2. textType에 circular 설정¶
- Label 연결선이 제거됨
<사진 48>
26. DonutChart 중앙에 텍스트 정보 추가¶
26.1. PIECHART2에 Title UI 추가¶
<사진 49>
27. TITLE2의 Text 데이터 Binding¶
27.1. text 옆 Binding 버튼 클릭¶
<사진 50>
27.2. GS_DONUT_1-PERCENT 선택¶
<사진 51>
27.3. Bind 클릭¶
<사진 52>
28. TITLE2의 Property Font 설정¶
28.1. fontWeight에 bold 입력¶
<사진 53>
28.2. fontsize에 25 입력¶
<사진 54>
29. TITLE2의 Property 위치 조정¶
29.1. y에 50% 입력¶
<사진 55>
29.2. x에 50% 입력¶
<사진 56>
29.3. centerX에 50% 입력¶
<사진 57>
30. DonutChart 결과 화면¶
<사진 58>
31. DonutChart 하단 Title 추가¶
31.1. PIECHART2 상위 VBOX3을 선택 후, content 옆에 +를 클릭¶
<사진 59>
31.2. Hbox UI 추가¶
<사진 60>
31.3. HBOX3 Property - justifyContent Center 설정¶
- 내부 UI 좌우폭 가운데 정렬
<사진 61>
31.4. HBOX3 내부에 Title UI 추가¶
<사진 62>
31.5. TITLE3의 Property text에 Product A 입력¶
<사진 63>
32. Title 적용 결과 확인¶
<사진 64>
33. DonutChart 추가¶
33.1. 기존 완성된 DonutChart 상위의 VBOX3를 Copy¶
<사진 65>
33.2. 복사된 UI를 HBOX2에 Paste¶
<사진 66> DonutChart UI Paste 선택 화면
<사진 67>DonutChart UI 복사 결과 화면
34. 복사된 DonutChart에 추가 대상 데이터를 Binding 진행¶
- 데이터 Binding만 재설정하여 DonutChart의 화면
표출 값을 Product B로변경
<사진 68> PIECHARTCONTENT3 데이터 Binding 화면
<사진 69>PIESERIES3 데이터 Binding 화면
<사진 70> TITLE4 데이터 Binding 화면
35. DashBoard 추가 SingleDonut 적용 결과 화면¶
<사진 71>
36. DonutChart 하단 추가¶
36.1. 기존 완성된 DonutChart 2개의 HBOX2를 Copy¶
<사진 72>
36.2. 복사된 UI를 VBOX2에 Paste¶
<사진 73>
36.3. 추가된 DonutChart에 Product C, Product D 데이터로 Binding¶
<사진 74>
37. DashBoard 2개 추가 SingleDonut 적용 결과 화면¶
<사진 75>