上一篇请参考使用abap开发简易折线图-CSDN博客
本文的目的是让不熟悉前端开发技术的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-title-left = 'center'.
ls_option-tooltip-show = 'X'.
ls_option-tooltip-trigger = 'item'.
ls_option-legend-show = 'X'.
ls_option-legend-orient = 'vertical'.
ls_option-legend-left = 'left'.
CLEAR ls_series.
ls_series-name = 'sale1'.
ls_series-type = 'pie'.
ls_series-radius = '50%'.
ls_series-label-show = 'X'.
ls_series-label-formatter = '{d}%'.
ls_series-emphasis-focus = 'self'.
CLEAR ls_data.
ls_data-value = '15'.
ls_data-name = '水果1'.
APPEND ls_data TO ls_series-data.
CLEAR ls_data.
ls_data-value = '12'.
ls_data-name = '水果2'.
APPEND ls_data TO ls_series-data.
CLEAR ls_data.
ls_data-value = '8'.
ls_data-name = '水果3'.
APPEND ls_data TO ls_series-data.
APPEND ls_series TO ls_option-series.
go_chart->set_options( ls_option ).
ENDFORM. " FRM_DRAW