SAP 使用abap开发简易折线图

本文的目的是让不熟悉前端开发技术的abap同学可以轻松开发可视化图表。

准备工作请参考上篇使用abap开发可视化图表-CSDN博客

准备工作完成后，就可以编写可视化程序

图表参数的设置请参考frm_draw1.

程序代码如下：

DATA go_chart TYPE REF TO zcl_gui_html_chartjs4.

CLASS cl_event_receiver DEFINITION DEFERRED.

DATA ob_event_receiver TYPE REF TO cl_event_receiver.

*----------------------------------------------------------------------*
*       CLASS cl_event_receiver DEFINITION
*----------------------------------------------------------------------*
*
*----------------------------------------------------------------------*
CLASS cl_event_receiver DEFINITION.
  PUBLIC SECTION .

    METHODS: sapevent
             FOR EVENT sapevent OF zcl_gui_html_chartjs4
            IMPORTING action frame getdata postdata query_table.


  PRIVATE SECTION .

ENDCLASS.                    "cl_event_receiver DEFINITION


*----------------------------------------------------------------------*
*       CLASS cl_event_receiver IMPLEMENTATION
*----------------------------------------------------------------------*
*
*----------------------------------------------------------------------*
CLASS cl_event_receiver IMPLEMENTATION.

  METHOD sapevent.
    "单击事件
    CASE action.
      WHEN 'CLICK'.
        PERFORM frm_process_click USING getdata.
      WHEN OTHERS.

    ENDCASE.
  ENDMETHOD.                    "sapevent

ENDCLASS.                    "cl_event_receiver IMPLEMENTATION

START-OF-SELECTION.

  CREATE OBJECT go_chart
    EXPORTING
      ir_parent = cl_gui_container=>default_screen
      iv_canum  = 1                                         "最大支持4
      iv_hor    = ''  "水平/垂直
      iv_ant    = ''.

  go_chart->new_chart( 'myChart1' ).
  PERFORM frm_draw1.

  PERFORM frm_register_event.

  go_chart->init_display( ).

  WRITE: 'ok'.

*&---------------------------------------------------------------------*
*&      Form  frm_process_click
*&---------------------------------------------------------------------*
*       text
*----------------------------------------------------------------------*
*      -->P_DATA     text
*----------------------------------------------------------------------*
FORM frm_process_click  USING  p_data.

  DATA lt_cdata TYPE TABLE OF string.
  DATA:xstr TYPE xstring.
  DATA:l_codepage(4) TYPE n.
  DATA:l_encoding(20).
  DATA:l_data TYPE string.
  DATA: convout TYPE REF TO cl_abap_conv_out_ce.
  DATA: convin TYPE REF TO cl_abap_conv_in_ce.
  DATA str TYPE string.


  l_data = p_data.
  CHECK l_data IS NOT INITIAL.

  "外部字符集转换内部编码
  CALL FUNCTION 'SCP_CODEPAGE_BY_EXTERNAL_NAME'
    EXPORTING
      external_name = 'utf-16be'
    IMPORTING
      sap_codepage  = l_codepage
    EXCEPTIONS
      not_found     = 1
      OTHERS        = 2.

  l_encoding = l_codepage.


  IF l_data IS NOT INITIAL.
    TRANSLATE l_data TO UPPER CASE.
    MOVE l_data TO xstr.

  ENDIF.

  convin = cl_abap_conv_in_ce=>create( encoding = l_encoding
                                        input = xstr ).

  CALL METHOD convin->read
    IMPORTING
      data = str.



ENDFORM.                    " FRM_PROCESS_CLICK


*&---------------------------------------------------------------------*
*&      Form  frm_register_event
*&---------------------------------------------------------------------*
*       text
*----------------------------------------------------------------------*
FORM frm_register_event .

  DATA: it_myevent TYPE cntl_simple_events ,
        st_myevent LIKE LINE OF it_myevent .


  IF ob_event_receiver IS NOT BOUND .
    CREATE OBJECT ob_event_receiver.
  ENDIF .

* Register event


  st_myevent-eventid = go_chart->m_id_sapevent.
  st_myevent-appl_event = abap_true .
  APPEND st_myevent TO it_myevent .

  CALL METHOD go_chart->set_registered_events
    EXPORTING
      events = it_myevent.


  SET HANDLER ob_event_receiver->sapevent
              FOR go_chart .

ENDFORM.                    " FRM_REGISTER_EVENT

*&---------------------------------------------------------------------*
*&      Form  frm_draw1
*&---------------------------------------------------------------------*
*       text
*----------------------------------------------------------------------*
FORM frm_draw1 .

 DATA: ls_option TYPE zcl_gui_html_chartjs4=>type_options,
        ls_tooltip TYPE zcl_gui_html_chartjs4=>ty_tooltip,
        ls_data TYPE zcl_gui_html_chartjs4=>ty_sdata,
        ls_series TYPE zcl_gui_html_chartjs4=>ty_series,
        ls_mdata TYPE zcl_gui_html_chartjs4=>ty_mdata.



  ls_option-title-text = 'demo'.
  ls_option-title-subtext = '测试'.
  ls_option-legend-show = 'X'.
  APPEND 'sale' TO ls_option-legend-data.


  ls_option-x_axis-show = 'X'.
  ls_option-y_axis-show = 'X'.
  ls_option-y_axis-type = 'value'.
  ls_option-tooltip-show = 'X'.
  ls_option-tooltip-trigger = 'axis'.
  ls_option-tooltip-axis_pointer-type = 'shadow'.

  ls_option-x_axis-type = 'category'.
  APPEND '水果1' TO ls_option-x_axis-data.
  APPEND '水果2' TO ls_option-x_axis-data.
  APPEND '水果3' TO ls_option-x_axis-data.



  CLEAR ls_series.
  ls_series-name = 'sale'.
  ls_series-type = 'line'.


  ls_series-label-show = 'X'.
  ls_series-label-formatter = 'X'. "千分位

  ls_data-value = '15003994'.
  APPEND ls_data TO ls_series-data.
  ls_data-value = '129939473'.
  APPEND ls_data TO ls_series-data.
  ls_data-value = '89937743'.
  APPEND ls_data TO ls_series-data.


  ls_series-mark_point-animation = 'X'.
  CLEAR ls_mdata.
  ls_mdata-type = 'max'.
  ls_mdata-symbol = 'pin'.
  ls_mdata-symbol_size = '30'.
  ls_mdata-label-show = 'Y'.
  ls_mdata-label-color = '#000'.
  ls_mdata-item_style-color = '#f00'.
  APPEND ls_mdata TO ls_series-mark_point-data.


  CLEAR ls_mdata.
  ls_mdata-type = 'min'.
  ls_mdata-symbol = 'pin'.
  ls_mdata-symbol_size = '30'.
  ls_mdata-label-show = 'Y'.
  ls_mdata-label-color = '#000'.
  ls_mdata-item_style-color = '#0f0'.
  APPEND ls_mdata TO ls_series-mark_point-data.


  APPEND ls_series TO ls_option-series.



  go_chart->set_options( ls_option ).

ENDFORM.                    " FRM_DRAW