[ABAP] HTML로 누적 막대 그래프 그려 넣기

ABAP에서 누적 막대 그래프 그리기를 포기했었는데

 

어느날 회식때 동료분이 블로그 글 보고 기억난다고 알려주셔서 그리는 방법을 알게 되었다. 

 

정말 감사합니다.

 

기존 코드를 가지고 쉬운 내용으로 템플릿을 만들어 봤다.

 

A, B, C, D 제품이 있을때

월별 누적 막대그래프를 예제이다.

 

 

방법은

누적 막대 그래프 차트를 그려주는 펑션을 가지고 이미지 데이터를 만들고

이미지 데이터를 가지고 이미지 URL을 생성하고

이미지 URL을 HTML에 포함시켜 SAP GUI에 출력하는 방식이다.

 

막대 그래프, 도넛 그래프 등 다양한 그래프를 그릴 수 있다.

 

 

코드중에 HTML을 어디 화면에 뿌려줄지 지정할 수 있다.

위처럼 ALV 컨테이너가 없어도 화면에 뿌려줄 수 있지만

 

컨테이너를 지정해서 해당 ALV에 표시할 수 도 있다.

 

HTML과 IGS_CHART를 TOP에 선언하여 전역적으로 해주고

 

위처럼 ALV INIT 이후에

HTML의 부모를 원하는 컨테이너에 넣어주면 된다.

 

HTML로 그린 화면은 다른 ALV로 전환하더라도 HTML에 가려져 안보일 수 있으니

VISIBLE을 껐다켰다하면서 다른 ALV와 사용해야한다.

 

 

전체 코드

*&---------------------------------------------------------------------*
*& Report ZS4H086R11
*&---------------------------------------------------------------------*
*&
*&---------------------------------------------------------------------*
REPORT ZS4H086R11.

" 예제 : 월별 제품 판매량을 누적 막대그래프


TYPES :
  BEGIN OF TY_SALES,
    MONTH       TYPE N LENGTH 2,   " 월
    PRODUCT_ID  TYPE C LENGTH 10,  " 제품ID
    SALES_COUNT TYPE I,            " 판매량
  END OF TY_SALES.


DATA : GT_SALE_DATA TYPE TABLE OF TY_SALES.

GT_SALE_DATA = VALUE #(
  ( MONTH = 1 PRODUCT_ID = 'A' SALES_COUNT = 1 )
  ( MONTH = 1 PRODUCT_ID = 'B' SALES_COUNT = 2 )
  ( MONTH = 2 PRODUCT_ID = 'A' SALES_COUNT = 1 )
  ( MONTH = 2 PRODUCT_ID = 'B' SALES_COUNT = 2 )
  ( MONTH = 2 PRODUCT_ID = 'C' SALES_COUNT = 3 )
  ( MONTH = 3 PRODUCT_ID = 'D' SALES_COUNT = 4 )
).


START-OF-SELECTION.
  DATA : LT_IGS_DATA TYPE TABLE OF IGS_DATA,
         LS_IGS_DATA LIKE LINE OF LT_IGS_DATA.

  TRY.
* Default RFC-Destination für IGS (Internet Graphics Server)
      DATA(LV_RFC_DEST) = CONV CHAR32( 'IGS_RFC_DEST' ).

* RFC-Destination festlegen
      CL_GFW=>ITS_RFC_DEST = LV_RFC_DEST.

* Ist der IGS Chart interpreter erreichbar?
      IF CL_IGS_DATA=>IS_REGISTERED_TYPE( TYPE = CL_IGS_CHART=>INTERPRETER_TYPE ) = ABAP_TRUE.

* IGS Chart-Objekt erzeugen
        DATA(O_IGS_CHART) = NEW CL_IGS_CHART( ).
        O_IGS_CHART->TYPE = CL_IGS_CHART=>CO_TYPE_COLS_STACKED.
        O_IGS_CHART->WIDTH = 500. "넓이
        O_IGS_CHART->HEIGHT = 500. "높이
        O_IGS_CHART->TITLE = 'Title'. "제목
        O_IGS_CHART->TITLE_CATEGORIES = 'X axis Title'. "X축 제목
        O_IGS_CHART->TITLE_VALUES = 'Y axis Title'. "Y축 제목

        LOOP AT GT_SALE_DATA ASSIGNING FIELD-SYMBOL(<FS_SALLE_DATA>).
          LS_IGS_DATA-X = <FS_SALLE_DATA>-MONTH.
          LS_IGS_DATA-Y = <FS_SALLE_DATA>-SALES_COUNT.
          LS_IGS_DATA-GROUPID = <FS_SALLE_DATA>-PRODUCT_ID.
          APPEND LS_IGS_DATA TO LT_IGS_DATA.
          CLEAR LS_IGS_DATA.
        ENDLOOP.

        "group id 정렬 , group id 순서가 다른 경우 매핑이 되지 않아 로직 추가
*        SORT LT_IGS_DATA BY GROUPID X.
        O_IGS_CHART->DATA = LT_IGS_DATA.
*        O_IGS_CHART->EXTENSION = VALUE IGS_EXT_TAB(
*                                                    ( TOKEN = 'TITLE' VALUE = '')"'href="http://www.google.de"' )
*                                                    ( TOKEN = 'LGNDI' VALUE = '')"'href="http://www.google.de"' )
*                                                  ).

        DATA: LV_CONTENT_TYPE TYPE W3PARAM-CONT_TYPE.
        DATA: LV_CONTENT_SUBTYPE TYPE W3PARAM-CONT_TYPE.
        DATA: LV_CONTENT_LENGTH TYPE W3PARAM-CONT_LEN.
        DATA: IT_MIME_CONTENT TYPE W3MIMETABTYPE.
        DATA: IT_IMAGEMAP_HTML TYPE W3HTMLTABTYPE.
        DATA: LV_MSG TYPE CHAR255.

*       Chart 데이터를 가지고 image 데이터 생성
        O_IGS_CHART->SEND( IMPORTING
                             CONTENT_TYPE   = LV_CONTENT_TYPE
                             CONTENT_LENGTH = LV_CONTENT_LENGTH
                             CONTENT        = IT_MIME_CONTENT
                             IMAGEMAP       = IT_IMAGEMAP_HTML
                             MSG_TEXT       = LV_MSG ).

* CONTENT TYPE : image/* -> CONTENTTYPE : image, CONTENT_SUBTYPE : *
        SPLIT LV_CONTENT_TYPE AT '/' INTO LV_CONTENT_TYPE LV_CONTENT_SUBTYPE.

* HTML-Viewer erzeugen
        DATA(O_HTML) = NEW CL_GUI_HTML_VIEWER( PARENT = CL_GUI_CONTAINER=>DEFAULT_SCREEN ).

        DATA: LV_MIME_CONTENT_URL TYPE W3URL.

* image 데이터를 가지고 이미지 URL을 생성
        O_HTML->LOAD_DATA( EXPORTING
                             TYPE         = LV_CONTENT_TYPE
                             SUBTYPE      = LV_CONTENT_SUBTYPE
                             SIZE         = LV_CONTENT_LENGTH
                           IMPORTING
                             ASSIGNED_URL = LV_MIME_CONTENT_URL
                           CHANGING
                             DATA_TABLE   = IT_MIME_CONTENT ).


* 위에서 생성된 이미지 URL을 img 태그의 src 파라미터로 사용하여 HTML 구성
        DATA(IT_HTML) = VALUE W3HTMLTABTYPE( ( LINE = '<html>' )
                                             ( LINE = '  <head>' )
*                                             ( line = '    <meta charset="utf-8">' ) "AAA
                                             ( LINE = '    <title>IGS Chart Demo</title>' )
                                             ( LINE = '  </head>' )
                                             ( LINE = '  <body>' ) ).
        APPEND LINES OF VALUE W3HTMLTABTYPE( ( LINE = '    <img src="' && LV_MIME_CONTENT_URL && '" usemap=#chart border=0>' )
                                             ( LINE = '  </body>' )
                                             ( LINE = '</html>' ) ) TO IT_HTML.

        DATA: LV_OUTPUT_URL TYPE W3URL.

* 위의 HTML을 가지고 HTML URL을 생성
        O_HTML->LOAD_DATA( EXPORTING
                             TYPE         = 'text'
                             SUBTYPE      = 'html'
                           IMPORTING
                             ASSIGNED_URL = LV_OUTPUT_URL
                           CHANGING
                             DATA_TABLE   = IT_HTML ).

* HTML im HTML-Viewer anhand der URL anzeigen : HTML URL을 사용하여 HTML 출력
        O_HTML->SHOW_URL( URL = LV_OUTPUT_URL ).
*        O_HTML->SHOW_URL( URL = 'https://www.naver.com/' ). <- 브라우저처럼 다른 웹 URL에 접속도 가능하다.

* Container cl_gui_container=>default_screen erzwingen
        WRITE: / SPACE.
      ENDIF.
    CATCH CX_ROOT INTO DATA(E_TXT).
      WRITE: / E_TXT->GET_TEXT( ).
  ENDTRY.