首先下载【免费】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博客