Advanced Usage of Map Chart¶

MapChart에서 국가를 클릭하면 해당 국가의 데이터를 기반으로 PieChart가 표시되도록 구성

결과 화면¶

<사진 1>MapChart에서 국가 클릭 시 PieChart가 표시되는 화면

주요 단계¶

1. Initial Data Setting¶

1.1. Global Type, Data Definition¶

"MapChart types
TYPES:

  BEGIN OF TY_DATA,

    KEY       TYPE STRING,                 " Country Key
    LATITUDE  TYPE P LENGTH 10 DECIMALS 5, " Latitude
    LONGITUDE TYPE P LENGTH 10 DECIMALS 5, " Longitude

  END OF TY_DATA.

"Output Table types
TYPES:

  BEGIN OF TY_OTAB,

    LABEL TYPE STRING, " Label.
    VAL01 TYPE INT4,   " Jan Amount sold / Quantity sold.
    VAL02 TYPE INT4,   " Feb Amount sold / Quantity sold.
    VAL03 TYPE INT4,   " Mar Amount sold / Quantity sold.
    VAL04 TYPE INT4,   " Apr Amount sold / Quantity sold.
    VAL05 TYPE INT4,   " May Amount sold / Quantity sold.
    VAL06 TYPE INT4,   " Jun Amount sold / Quantity sold.
    VAL07 TYPE INT4,   " Jul Amount sold / Quantity sold.
    VAL08 TYPE INT4,   " Aug Amount sold / Quantity sold.
    VAL09 TYPE INT4,   " Sep Amount sold / Quantity sold.
    VAL10 TYPE INT4,   " Oct Amount sold / Quantity sold.
    VAL11 TYPE INT4,   " Nov Amount sold / Quantity sold.
    VAL12 TYPE INT4,   " Dec Amount sold / Quantity sold.
    WAERS TYPE WAERS,  " currency.
    UNIT  TYPE UNIT,   " unit.

  END OF TY_OTAB.

DATA:
  "Business activity initial configuration internal table data
  GT_DATA TYPE TABLE OF TY_DATA WITH NON-UNIQUE SORTED KEY K01 COMPONENTS KEY.

DATA:
  "PieChart control / data structure.
  BEGIN OF GS_PIE,

    VISIBLE           TYPE ABAP_BOOL, "PieChart visibility
    CURR_MON_QUAN     TYPE P LENGTH 13 DECIMALS 2,
    WITHOUT_CURR_QUAN TYPE P LENGTH 13 DECIMALS 2,
    PERCENT           TYPE STRING.
    INCLUDE TYPE TY_DATA.

DATA: END OF GS_PIE.

"Display Internal Table
DATA: GT_OTAB TYPE TABLE OF TY_OTAB.

1.2. Sample Initial Data Setting¶

DATA: LS_DATA LIKE LINE OF GT_DATA.
DATA: LV_INT  TYPE INTEGER2.
DATA: LV_NUM  TYPE N LENGTH 2.

*--------------------------------------------------------------------*

"KOREA
LS_DATA-KEY       = 'KR'.  "Country Key
LS_DATA-LATITUDE  = '37'.  "Latitude
LS_DATA-LONGITUDE = '127'. "Longitude

APPEND LS_DATA TO GT_DATA.
CLEAR LS_DATA.

"USA
LS_DATA-KEY       = 'US'.  "Country Key
LS_DATA-LATITUDE  = '37'.  "Latitude
LS_DATA-LONGITUDE = '-95'. "Longitude

APPEND LS_DATA TO GT_DATA.
CLEAR LS_DATA.

"CHINA
LS_DATA-KEY       = 'CN'.  "Country Key
LS_DATA-LATITUDE  = '36'.  "Latitude
LS_DATA-LONGITUDE = '104'. "Longitude

APPEND LS_DATA TO GT_DATA.
CLEAR LS_DATA.

"JAPAN
LS_DATA-KEY       = 'JP'.  "Country Key
LS_DATA-LATITUDE  = '36'.  "Latitude
LS_DATA-LONGITUDE = '138'. "Longitude

APPEND LS_DATA TO GT_DATA.
CLEAR LS_DATA.

"INDIA
LS_DATA-KEY       = 'IN'.  "Country Key
LS_DATA-LATITUDE  = '20'.  "Latitude
LS_DATA-LONGITUDE = '79'.  "Longitude

APPEND LS_DATA TO GT_DATA.
CLEAR LS_DATA.

2. PAGE에서 UI Object 추가 버튼 클릭¶

<사진 2>

3. item 선택 메뉴에서 MapChart 입력 후 선택¶

<사진 3>

4. MAPCHART1의 Property height 700px을 입력¶

<사진 4>

5. MAPCHART1 우측 마우스 클릭 후, UP을 눌러 MAPCHART1의 위치를 TABLE1 위로 변경¶

<사진 5> MapChart 위치 변경 전 화면

<사진 6> MapChart 위치 변경 후 화면

6. MAPCHART1에서 UI Object 추가 버튼 클릭¶

<사진 7>

7. mapPolygonSeries 선택 메뉴에서 MapPolygonSeries 입력 후 선택¶

<사진 8>

8. MAPPOLYGONSERIES1의 click Event에서 "EV_CLICK"을 선택¶

<사진 9>

8.1. EV_CLICK sourceCode Sample¶

DATA: LS_FORM_DATA LIKE LINE OF IT_FORM_DATA,
      LS_DATA      LIKE LINE OF GT_DATA.

*--------------------------------------------------------------------*

"Clear PieChart Setting.
CLEAR GS_PIE.

*-- Read Country ID

"Read Clicked Country ID
READ TABLE IT_FORM_DATA INTO LS_FORM_DATA WITH KEY NAME = 'click|areaId'.

CHECK SY-SUBRC EQ 0.

"Get country data.
READ TABLE GT_DATA INTO LS_DATA WITH TABLE KEY K01 COMPONENTS KEY = LS_FORM_DATA-VALUE.

"No country data.
IF SY-SUBRC NE 0.

  CALL METHOD /U4A/CL_UTILITIES=>M_MESSAGETOAST
    EXPORTING
      IO_VIEW = AR_VIEW              " [U4A] UI Element Super Class.
      I_MSGTX = 'Unregistered Area'. " MESSAGE TEXT.

  EXIT.

ENDIF.

*--Setting PieChart.

GS_PIE-KEY       = LS_DATA-KEY.        " Country ID.
GS_PIE-LATITUDE  = LS_DATA-LATITUDE.   " Latitude.
GS_PIE-LONGITUDE = LS_DATA-LONGITUDE.  " Longitude.
GS_PIE-VISIBLE   = ABAP_TRUE.          " PieChart Visibility.

*-- Setting Display Internal Table data.
CALL METHOD SET_OTAB.