콘텐츠로 이동

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>