本文的目的是让不熟悉前端开发技术的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_option-title-text = 'demo'.
ls_option-title-subtext = '测试'.
ls_option-legend-show = 'X'.
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-type = 'bar'.
ls_series-label-show = 'X'.
ls_series-label-position = 'inside'.
ls_series-label-formatter = 'X'. "千分位
ls_data-value = '1500032'.
ls_data-item_style-color = '#5470c6'.
APPEND ls_data TO ls_series-data.
ls_data-value = '12009383'.
ls_data-item_style-color = '#91cc75'.
APPEND ls_data TO ls_series-data.
ls_data-value = '800093'.
ls_data-item_style-color = '#fac858'.
APPEND ls_data TO ls_series-data.
APPEND ls_series TO ls_option-series.
go_chart->set_options( ls_option ).
ENDFORM. " FRM_DRAW