SAP 使用abap开发仪表盘二

伊登

已于 2024-01-26 09:12:30 修改

阅读量401

点赞数 7

分类专栏： ABAP可视化图表文章标签：信息可视化数据分析 echarts 开发语言

于 2024-01-24 16:25:36 首次发布

本文链接：https://blog.csdn.net/x_aerbo/article/details/135825545

版权

ABAP可视化图表专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文介绍了如何使用ABAP编程语言在SAP系统中，结合HTMLChart.js库，为不熟悉前端技术的开发者创建可视化图表，包括图表参数设置和事件处理的详细步骤。

摘要由CSDN通过智能技术生成

上一篇请参考SAP 使用ABAP开发仪表盘一-CSDN博客

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

准备工作请参考SAP 使用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_color TYPE zcl_gui_html_chartjs4=>ty_axline_style1.



  ls_option-title-text = 'demo'.
  ls_option-title-subtext = '测试'.


  CLEAR ls_series.
  ls_series-name = 'sale1'.
  ls_series-type = 'gauge'.
*  APPEND '50%' TO ls_series-center.
*  APPEND '55%' TO ls_series-center.
  ls_series-start_angle = '200'.
  ls_series-end_angle = '-20'.
*  ls_series-clockwise = 'X'.
  ls_series-min = '0'.
  ls_series-max = '150'.
  ls_series-split_number = '15'.

  ls_series-item_style-color = '#f37215'.
  ls_series-item_style-shadow_color = 'rgba(0,138,255,0.45)'.
  ls_series-item_style-shadow_blur = '10'.
  ls_series-item_style-shadow_offset_x = '2'.
  ls_series-item_style-shadow_offset_y = '2'.


  ls_series-axis_line-show = 'X'. "//是否显示仪表盘轴线
  ls_series-axis_line-round_cap = 'X'. "//是否在两端显示成圆形
  ls_series-axis_line-line_style-width = '18'.


  ls_series-axis_tick-show = 'X'. "是否显示刻度
  ls_series-axis_tick-distance = '-29'.
  ls_series-axis_tick-line_style-color = '#fff'.
  ls_series-axis_tick-line_style-width = '2'.


  ls_series-split_line-show = 'X'. "//是否显示分隔线
  ls_series-split_line-distance = '-30'.


  ls_series-axis_label-show = 'X'. "//是否显示标签
  ls_series-axis_label-distance = '-10'.
  APPEND ls_series TO ls_option-series.



  ls_series-progress-show = 'X'. "//是否显示进度条
  ls_series-progress-round_cap = 'X'.
  ls_series-progress-width = '18'.
  ls_series-progress-item_style-color = 'linear'.

  ls_series-pointer-show = 'X'. "//是否显示指针
  ls_series-pointer-item_style-color = 'linear'.


  ls_series-detail-show = 'X'."//是否显示详情
  ls_series-detail-value_animation = 'X'. "//是否开启标签的数字动画
  ls_series-detail-border_radius = '8'. "//文字块的圆角
  APPEND '0' TO ls_series-detail-offset_center.
  APPEND '70%' TO ls_series-detail-offset_center.
  ls_series-detail-formatter = '{value}%'.
  ls_series-detail-color = 'auto'.



  ls_data-value = '20'.
  ls_data-name = '速度'.
  APPEND ls_data TO ls_series-data.

  APPEND ls_series TO ls_option-series.

  go_chart->set_options( ls_option ).

ENDFORM.                    " FRM_DRAW