上一篇请参考使用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_color TYPE zcl_gui_html_chartjs4=>ty_axline_style1.
ls_option-title-text = 'demo'.
ls_option-title-subtext = '测试'.
APPEND 'sale1' TO ls_option-legend-data.
CLEAR ls_series.
ls_series-name = 'sale1'.
ls_series-type = 'gauge'.
ls_series-min = '0'.
ls_series-max = '120'.
ls_series-split_number = '6'.
ls_series-axis_line-line_style-width = '20'.
APPEND `[0.33, '#313695']` TO ls_series-axis_line-line_style-color.
APPEND `[0.67, '#74add1']` TO ls_series-axis_line-line_style-color.
APPEND `[1, '#a50026']` TO ls_series-axis_line-line_style-color.
ls_series-axis_tick-distance = '10'.
ls_series-axis_tick-length = '10'.
ls_series-axis_tick-line_style-color = 'atuo'.
ls_series-anchor-show = 'X'.
ls_series-anchor-show_above = 'X'.
ls_series-anchor-size = '25'.
ls_series-anchor-item_style-border_width = '10'.
ls_series-split_line-distance = '-30'.
ls_series-split_line-length = '30'.
ls_series-split_line-line_style-color = '#fff'.
ls_series-split_line-line_style-width = '4'.
ls_series-axis_label-color = 'inherit'.
ls_series-axis_label-distance = '-35'. "刻度数字位置
ls_series-axis_label-font_size = '20'.
ls_series-detail-value_animation = 'X'.
ls_series-detail-formatter = '{value} km/h'.
ls_series-detail-color = 'inherit'.
ls_data-value = '1.55'.
ls_data-name = '速度'.
ls_data-title-font_size = '20'.
ls_data-detail-font_size = '20'.
APPEND ls_data TO ls_series-data.
APPEND ls_series TO ls_option-series.
go_chart->set_options( ls_option ).
ENDFORM. " FRM_DRAW