Business Charts¶
목적
XYChart를 활용하여 올해와 작년의 연간 실적을 비교하는 비즈니스 차트 구성
결과 화면
<사진 1> XYChart를 활용한 연간 실적 비교용 비즈니스 차트 예시 화면
주요 단계
1. Initial Data Setting¶
1.1. Global Type, Data Definition¶
"output table list type
TYPES:
BEGIN OF TY_LIST,
LGDTX TYPE STRING, " Category_name
VAL01 TYPE P LENGTH 15 DECIMALS 2, " Jan
VAL02 TYPE P LENGTH 15 DECIMALS 2, " Feb
VAL03 TYPE P LENGTH 15 DECIMALS 2, " Mar
VAL04 TYPE P LENGTH 15 DECIMALS 2, " Apr
VAL05 TYPE P LENGTH 15 DECIMALS 2, " May
VAL06 TYPE P LENGTH 15 DECIMALS 2, " Jun
VAL07 TYPE P LENGTH 15 DECIMALS 2, " Jul
VAL08 TYPE P LENGTH 15 DECIMALS 2, " Aug
VAL09 TYPE P LENGTH 15 DECIMALS 2, " Sept
VAL10 TYPE P LENGTH 15 DECIMALS 2, " Oct
VAL11 TYPE P LENGTH 15 DECIMALS 2, " Nov
VAL12 TYPE P LENGTH 15 DECIMALS 2, " Dec
WAERS TYPE WAERS, " Currency units
END OF TY_LIST.
"output XYchart data list type
TYPES:
BEGIN OF TY_CHART,
CAT_TEXT TYPE STRING, " Category.
VALUE01 TYPE P LENGTH 15 DECIMALS 2, " This year Performance.
VALUE02 TYPE P LENGTH 15 DECIMALS 2, " Last year Performance.
WAERS TYPE WAERS, " Currency units.
END OF TY_CHART.
"Output Table data.
DATA:
GT_LIST TYPE TABLE OF TY_LIST.
"Output XYchart data.
DATA:
GT_CHART TYPE TABLE OF TY_CHART.
1.2. Sample Initial Data Setting¶
DATA : LS_LIST TYPE TY_LIST,
LS_CHART LIKE LINE OF GT_CHART,
LV_NUM TYPE N LENGTH 2,
LV_INDEX TYPE SY-INDEX,
LV_TABIX TYPE SY-TABIX,
LV_VAL TYPE P LENGTH 15 DECIMALS 2,
LV_NAME TYPE STRING.
FIELD-SYMBOLS <LV_VAL> TYPE TY_LIST-VAL01.
*--------------------------------------------------------------------*
CLEAR: GT_LIST.
*--Set output table data - This / Last Year Actual
"This Year Actual
LS_LIST-LGDTX = 'This Year Actuals'. " Category_name
LS_LIST-VAL01 = '91415'. " Jan
LS_LIST-VAL02 = '110350'. " Feb
LS_LIST-VAL03 = '255022'. " Mar
LS_LIST-VAL04 = '150104'. " Apr
LS_LIST-VAL05 = '154186'. " May
LS_LIST-VAL06 = '215926'. " Jun
LS_LIST-VAL07 = '215926'. " Jul
LS_LIST-VAL08 = '141588'. " Aug
LS_LIST-VAL09 = '213179'. " Sept
LS_LIST-VAL10 = '182366'. " Oct
LS_LIST-VAL11 = '235730'. " Nov
LS_LIST-VAL12 = '404250'. " Dec
LS_LIST-WAERS = 'USD'. " Currency units
APPEND LS_LIST TO GT_LIST.
CLEAR LS_LIST.
"Last Year Actual
LS_LIST-LGDTX = 'Last Year Actuals'. " Category_name
LS_LIST-VAL01 = '279397'. " Jan
LS_LIST-VAL02 = '239607'. " Feb
LS_LIST-VAL03 = '350205'. " Mar
LS_LIST-VAL04 = '257693'. " Apr
LS_LIST-VAL05 = '240036'. " May
LS_LIST-VAL06 = '193479'. " Jun
LS_LIST-VAL07 = '214079'. " Jul
LS_LIST-VAL08 = '182347'. " Aug
LS_LIST-VAL09 = '180081'. " Sept
LS_LIST-VAL10 = '178653'. " Oct
LS_LIST-VAL11 = '137902'. " Nov
LS_LIST-VAL12 = '183170'. " Dec
LS_LIST-WAERS = 'USD'. " Currency units
APPEND LS_LIST TO GT_LIST.
CLEAR LS_LIST.
*-- Set chart data.
DO 12 TIMES.
CLEAR: LS_CHART, LV_NUM, LV_NAME.
LV_NUM = SY-INDEX.
"Category Setting.
CASE LV_NUM.
WHEN '01'. LS_CHART-CAT_TEXT = 'Jan'.
WHEN '02'. LS_CHART-CAT_TEXT = 'Feb'.
WHEN '03'. LS_CHART-CAT_TEXT = 'Mar'.
WHEN '04'. LS_CHART-CAT_TEXT = 'Apr'.
WHEN '05'. LS_CHART-CAT_TEXT = 'May'.
WHEN '06'. LS_CHART-CAT_TEXT = 'Jun'.
WHEN '07'. LS_CHART-CAT_TEXT = 'Jul'.
WHEN '08'. LS_CHART-CAT_TEXT = 'Aug'.
WHEN '09'. LS_CHART-CAT_TEXT = 'Sept'.
WHEN '10'. LS_CHART-CAT_TEXT = 'Oct'.
WHEN '11'. LS_CHART-CAT_TEXT = 'Nov'.
WHEN '12'. LS_CHART-CAT_TEXT = 'Dec'.
ENDCASE.
"Set chart data from Output Table data.
LOOP AT GT_LIST INTO LS_LIST.
CLEAR: LV_TABIX.
LV_TABIX = SY-TABIX.
LV_NAME = 'VAL' && LV_NUM.
ASSIGN COMPONENT LV_NAME OF STRUCTURE LS_LIST TO <LV_VAL>.
CHECK <LV_VAL> IS ASSIGNED.
CASE LV_TABIX.
WHEN 1.
LS_CHART-VALUE01 = <LV_VAL>.
WHEN 2.
LS_CHART-VALUE02 = <LV_VAL>.
ENDCASE.
"Set currency
LS_CHART-WAERS = LS_LIST-WAERS.
ENDLOOP.
APPEND LS_CHART TO GT_CHART.
CLEAR LS_CHART.
ENDDO.
2. PAGE에서 UI Object 추가 버튼 클릭¶

<사진 2>
3. content 선택 메뉴에서 XYChart 입력 후 선택¶
<사진 3>
4. height를 500px로 입력¶
<사진 4>
5. XYCHART1에서 UI Object 추가 버튼 클릭¶
<사진 5>
6. legend 선택 메뉴에서 Legend 입력 후 선택¶
<사진 6>
7. XYCHART1에서 UI Object 추가 버튼 클릭¶
<사진 7>
8. title 선택 메뉴에서 Title 입력 후 선택¶
<사진 8>
9. text를 Year Over Month Performance로 입력¶
<사진 9>
10. Property x, centerX 입력¶
10.1. x을 50%로 입력¶
<사진 10>
10.2. centerX를 50%로 입력¶
<사진 11>
11. XYCHART1에서 UI Object 추가 버튼 클릭¶
<사진 12>
12. categoryAxis 선택 메뉴에서 CategoryAxis 입력 후 선택¶
<사진 13>
13. CATEGORYAXIS1의 categoryItems binding¶
13.1. categoryItems 옆 Binding Button을 클릭¶
<사진 14>
13.2. binding 팝업창이 실행¶
13.3. GT_CHART을 선택¶
13.4. Bind 버튼을 클릭¶
<사진 15>
14. minGridDistance에 10을 입력¶
<사진 16>
15. CATEGORYAXIS1에서 UI Object 추가 버튼 클릭¶
<사진 17>
16. valueAxis 선택 메뉴에서 ValueAxis 입력 후 선택¶
<사진 18>
17. VALUEAXIS1에서 UI Object 추가 버튼 클릭¶
<사진 19>
18. grid 선택 메뉴에서 Grid 입력 후 선택¶
<사진 20>
19. Grid의 Property에서 visible false를 선택¶
<사진 21>
20. VALUEAXIS1에서 UI Object 추가 버튼 클릭¶
<사진 22>
21. title 선택 메뉴에서 Title 입력 후 선택¶
<사진 23>
22. TITLE2의 Property 설정¶
22.1. y에 50%를 입력¶
<사진 24>
22.2. rotation에 90 을 입력¶
<사진 25>
22.3. text에 Performance (USD) 을 입력¶
<사진 26>
23. CATEGORYAXIS1에서 UI Object 추가 버튼 클릭¶
<사진 27>
24. seriesSetting 선택 메뉴에서 SeriesSetting 입력 후 선택¶
<사진 28>
25. SERIESSETTING1에서 UI Object 추가 버튼 클릭¶
<사진 29>
26. bars 선택 메뉴에서 BarSetting 입력 후 생성 갯수를 2개 선택¶
<사진 30>
27. BARSETTING1의 name에 This Year 을 입력¶
<사진 31>
28. BARSETTING2의 name에 Last Year 을 입력¶
<사진 32>
29. CATEGORYAXIS1에서 UI Object 추가 버튼 클릭¶
<사진 33>
30. categoryItems 선택 메뉴에서 CategoryItem 입력 후 선택¶
<사진 34>
31. CATEGORYITEM1의 categoryText Binding¶
31.1. categoryText 옆 binding Button을 클릭¶
<사진 35>
31.2. binding 팝업창이 실행¶
31.3. GT_CHART-CAT_TEXT 을 선택¶
31.4. Bind 버튼을 클릭¶
<사진 36>
32. CATEGORYITEM1에서 UI Object 추가 버튼 클릭¶
<사진 37>
33. barItems 선택 메뉴에서 BarItem 입력 후 선택¶
<사진 38>
34. BARITEM1의 value binding¶
34.1. value 옆 binding Button을 클릭¶
<사진 39>
34.2. binding 팝업창이 실행¶
34.3. GT_CHART-VALUE01 을 선택¶
34.4. Bind type sap.ui.model.type.Currency 를 선택¶
34.5. Reference Field name GT_CHART-WAERS 를 선택¶
34.6. Bind 버튼을 클릭¶
<사진 40>
35. BARITEM1 에서 UI Object 추가 버튼 클릭¶
<사진 41>
36. bullet 선택 메뉴에서 Bullet 입력 후 선택¶
<사진 42>
37. locationY에 1을 입력¶
<사진 43>
38. BULLET1 에서 UI Object 추가 버튼 클릭¶
<사진 44>
39. Label을 선택 후, Confirm 버튼을 클릭¶
<사진 45>
40. LABEL14의 Property 설정¶
40.1. centerX에 50%을 입력¶
<사진 46>
40.2. centerY에 100%을 입력¶
<사진 47>
40.3. fontSize에 10을 입력¶
<사진 48>
41. LABEL14의 text binding¶
41.1. text 옆 binding Button을 클릭¶
<사진 49>
41.2. binding 팝업창이 실행¶
41.3. GT_CHART-VALUE01 을 선택¶
41.4. Bind type sap.ui.model.type.Currency 를 선택¶
41.5. Reference Field name GT_CHART-WAERS 를 선택¶
41.6. Bind 버튼을 클릭¶
<사진 50>
42. BARITEM1을 복사 (Copy)¶
<사진 51>
43. CATEGORYITEM1에 붙여넣기 (Paste)¶
<사진 52>
44. No를 선택하여 바인딩을 유지 하지 않고 붙여넣기 처리¶
<사진 53>
45. BarItem2의 value binding¶
45.1. value 옆 binding Button을 클릭¶
<사진 54>
45.2. binding 팝업창이 실행¶
45.3. GT_CHART-VAlUE02 을 선택¶
45.4. Bind type sap.ui.model.type.Currency 를 선택¶
45.5. Reference Field name GT_CHART-WAERS 를 선택¶
45.6. Bind 버튼을 클릭.¶
<사진 55>
46. LABEL15의 text binding¶
46.1. text 옆 binding Button을 클릭¶
<사진 56>
46.2. binding 팝업창이 실행¶
46.3. GT_CHART-VALUE02 을 선택¶
46.4. Bind type sap.ui.model.type.Currency 를 선택¶
46.5. Reference Field name GT_CHART-WAERS 를 선택¶
46.6. Bind 버튼을 클릭¶
<사진 57>
47. XYCHART1을 TABLE1 위로 이동¶
<사진 58>
48. Application Activate¶
<사진 59>
49. Application Execution¶
<사진 60>
50. 결과 화면 확인¶
<사진 61>