SAP 使用abap开发可视化图表

参考上篇 SAP ABAP可视化图表开发-CSDN博客

首先下载【免费】abapforechart资源-CSDN文库

然后使用saplink安装

saplink的部署请参考网上资料，有很多，这里暂不提供。

saplink安装后，再安装saplink plugs，也请参考网上资料。

全部安装完成后，再使用saplink导入上面下载的程序包，导入完成后需要改造下。

复制class:ZSAPLINK_W3MI,重新命名为ZSAPLINK_W3HT

修改GETOBJECTTYPE方法，如下：

METHOD GETOBJECTTYPE.
  objecttype = 'W3HT'.
ENDMETHOD.

到这里前提工作已经完成，就可以使用abap开发可视化图表了。

编写可视化程序：

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_datazoom TYPE zcl_gui_html_chartjs4=>ty_datazoom.


  ls_option-title-text = 'demo'.
  ls_option-title-subtext = '测试'.
  APPEND 'sale1' TO ls_option-legend-data.


  ls_option-y_axis-show = 'X'.
  ls_option-y_axis-type = 'value'.
  ls_option-y_axis-max = 'dataMax'.


  ls_option-tooltip-show = 'X'.
  ls_option-tooltip-trigger = 'axis'.
*  ls_option-tooltip-axis_pointer-type = 'shadow'.

  ls_option-x_axis-type = 'category'.
  ls_option-x_axis-show = 'X'.

  APPEND '水果1' TO ls_option-x_axis-data.
  APPEND '水果2' TO ls_option-x_axis-data.
  APPEND '水果3' TO ls_option-x_axis-data.
  APPEND '水果4' TO ls_option-x_axis-data.


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


  CLEAR ls_data.
  ls_data-value = '0'.
  APPEND ls_data TO ls_series-data.
  ls_data-value = '3'.
*  ls_data-item_style-color = '#a90000'.
  APPEND ls_data TO ls_series-data.
  ls_data-value = '7'.
  APPEND ls_data TO ls_series-data.
  ls_data-value = '10'.
  APPEND ls_data TO ls_series-data.

  APPEND ls_series TO ls_option-series.

  CLEAR ls_series.
  ls_series-name = 'sale1'.
  ls_series-type = 'bar'.

  ls_series-label-show = 'X'.

  ls_data-value = '15'.
  ls_data-item_style-color = '#3e95cd'.
  APPEND ls_data TO ls_series-data.
  ls_data-value = '12'.
  ls_data-item_style-color = '#8e5ea2'.
  APPEND ls_data TO ls_series-data.
  ls_data-value = '8'.
  ls_data-item_style-color = '#c45850'.
  APPEND ls_data TO ls_series-data.
  ls_data-value = '5'.
  ls_data-item_style-color = ''.
  APPEND ls_data TO ls_series-data.

  APPEND ls_series TO ls_option-series.

  ls_datazoom-type = 'slider'.
  ls_datazoom-id = 'sliderX'.
  ls_datazoom-brush_select = ''.
  ls_datazoom-zoom_lock = 'X'.
  ls_datazoom-start_value = 0.
  ls_datazoom-end_value = 2.
  ls_datazoom-realtime = 'X'.
  ls_datazoom-filter_mode = 'none'.
  ls_datazoom-show_detail = 'X'.
  APPEND ls_datazoom TO ls_option-data_zoom.

  go_chart->set_options( ls_option ).

ENDFORM.                    " FRM_DRAW

如果想了解更多图表设置方法，请参考Apache ECharts。

其他图表可参考使用abap开发简易柱状图-CSDN博客