&chartWidth=400&chartHeight=300
&DOMId=myChartId®isterWithJS=1&debugMode=0"
width="400"height="300"name="Column3D"
quality="high"
type="application/x-shockwave-flash"
pluginspage=""/>
简单明了,省了不少脑细胞。
再看看相关的帮助文档:
WhenusingHTMLembedding,allvariablestothechartarepassedusingFlashVars.Thetablebelowlistsallsuchvariablessupported:
Variable
Description
dataURL
ThisvariabletakesthepathoftheXMLdatafile/streamasvalue.Thismethodiscalled.ItismutuallyexclusivetodataXMLvariable.
*Incaseboth&dataURLand&dataXMLaresettoblankornotprovided,thechartwillsearchfordefaultfileinthesamepathastheHTMLfile.
dataXML
ThisvariablepassestheXMLembeddedinor
*Incaseboth&dataURLand&dataXMLaresettoblankornotprovided,thechartwillsearchfordefaultfileinthesamepathastheHTMLfile.
DOMId
IDforthechartusingwhichitwillberecognizedintheHTMLpage.EachchartonthepageneedstohaveauniqueID.
chartWidth
Intendedwidthforthechart(valueinpixelswithoutanypxsuffixorvalueinpercentwith%25assuffix.%25istheUrlEncodedformof%sign)
chartHeight
Intendedheightforthechart(valuesinpixelswithoutanypxsuffixorvalueinpercentwith%25assuffix.%25istheUrlEncodedformof%sign)
debugMode
WhethertostartthechartindebugmodewhichshowsaDebugWindowoverthechart.Setitto1toshowtheDebugWindow.PleaseseesectionformoredetailsonDebugMode.
registerWithJS
WhethertoregisterthechartwithJavaScript.Thisvalueshouldalwaysbesetto1togetmaximumpossibleaccesstoFusionChartsJavaScriptAPI.ButwhenusingOBJECT/EMBEDmethod,onlyminimalJavaScriptfunctionsareavailabletochart.,setDataURL,setDataXML,print,exportChartetc.)
scaleMode
Scalingoptionofthechart.Itcantakeanyvalueoutofthefour:
"noscale","exactfit","noborder"and"showall".FusionChartsworksbestin"noScale"mode.
lang
(optional)Preferredlanguageforchartmessages..EN.ThepresentsupportedlanguageisEN.English.Otherlanguagescanbeaddedbyaddingtosourcecodeofchartandthencompilingit.
现在,我们清楚了FusionCharts的工作原理:
Ø构建Flashplayer控件。
Ø设置使用的图表对应的SWF文件。
Ø通过Flashplayer控件的FlashVars传入相关参数。
三、在SAPGUI集成FusionCharts
清楚了工作原理,现在就可以开始在SAPGUI中实现FusionCharts的集成了。
定义FusionCharts的控件,如下:
1、建立控件类
按ABAP里边定义控件的规矩,控件必须继承CL_GUI_CONTROL。
2、定义控件属性
根据FusionCharts的参数,定义相关属性如下:
3、定义相关方法。
4、CONSTRUCTOR方法实现构建Flashplayer控件的方法,代码如下:
METHOD constructor.
DATA clsid(80).
DATA:
return,guitype TYPE i.
IF clsid IS INITIAL.
IF NOT activex IS INITIAL.
clsid = '{D27CDB6E-AE6D-11CF-96B8-0000}'.
ELSEIF NOT javabean IS INITIAL.
RAISE error.
ELSE.
RAISE error.
ENDIF.
ENDIF.
CALL METHOD super->constructor
EXPORTING
clsid = clsid
shellstyle = shellstyle
parent = parent
lifetime = lifetime
name = name
EXCEPTIONS
OTHERS = 1.
IF sy-subrc NE 0.
RAISE error.
ENDIF.
CALL METHOD cl_gui_cfw=>subscribe
EXPORTING
shellid = h_control-shellid
ref = me
EXCEPTIONS
OTHERS = 1.
IF sy-subrc NE 0.
RAISE error.
ENDIF.
ENDMETHOD.
'{D27CDB6E-AE6D-11CF-96B8-0000}'比较眼熟吧,在FusionCharts的例子中我们就可以看出这个是Flashplayer控件的ClassID,继承CL_GUI_CONTROL后只需要修改成FlashPlayer对应的ClassID就OK了,其他的代码直接参考其他控件的构造函数。
5、实现SHOW_CHART函数,该函数负责根据类的属性对FlashPlayer进行赋值。
METHOD show_chart .
DATA:
fvars TYPE string,
s TYPE string.
IF dataurl IS NOT INITIAL.
CONCATENATE '&dataURL=' dataurl INTO s.
ELSE.
CONCATENATE '&dataXML=' dataxml INTO s.
ENDIF.
CONCATENATE s "dataURL OR dataXML
'&DOMId=' domid
'&chartWidth=' chartwidth
'&chartHeight=' chartheight
'&debugMode=' debugmode
'®isterWithJS=' registerwithjs
'&scaleMode=' scalemode
'&lang=' lang
INTO fvars.
call method call_method“实现刷新
exporting
method = 'Rewind'
p_count = 0.
SET PROPERTY OF h_control-obj 'Movie' = swfurl.
SET PROPERTY OF h_control-obj 'FlashVars' = fvars.
CALL METHOD call_method
EXPORTING
method = 'Play'
p_count = 0.
IF sy-subrc NE 0.
RAISE error.
ENDIF.
ENDMETHOD.
四、测试
到此我们对FusionCharts的封装已经完成,建立测试程序测试一下:
REPORT zfusionchart.
DATA:
ok_code TYPE sy-ucomm.
DATA:
chart TYPE REF TO zcl_gui_fusionchart.
DATA l_container TYPE REF TO cl_gui_custom_container.
CALL SCREEN 0100.
MODULE status_0100 OUTPUT.
CREATE OBJECT l_container
EXPORTING
container_name = 'CON1'.
CREATE OBJECT chart
EXPORTING
parent = l_container.
chart->dataurl = '"指定图表数据文件
chart->domid = 'chart1'."设置图标唯一名字
chart->swfurl = '"指定图表采用的swf文件
CALL METHOD chart->show_chart."显示图表
ENDMODULE.
其中,FusionCharts的相关swf文件放在了IIS里边,避免对每个用户都下发相关的swf文件。
内容如下:
运行下看看效果:
再换Bar2D方式看看效果:
OK,效果还不错。
到此我们已经完成了FusionCharts在SAPGUI中的集成,代码不到50行。
五、应用时注意问题
我们先看下FusionChartsFree下载包中有哪些内容:
SWF文件(创建图形主要靠它们了)
所有的SWF文件(共22个)都在FusionChartsFree>Charts文件夹。
如果你需要在你的web应用里创建图形,那么就把这些SWF文件都拷到你的应用下面。
FusionChartsJavaScript文件
FusionChartsJavaScript文件放在FusionChartsFree>JSClass文件夹。
这些文件能够帮你用一种友好的方式把图形嵌入到html页面。
示例代码
所有的代码都放在FusionChartsFree>Code文件夹。
图形例子
我们创建了一些图形例子,放在FusionChartsFree>Gallery文件夹。
你也可以通过文档左边的菜单SampleCharts来访问它。
文档
文档就放在FusionChartsFree>Contents文件夹,你可以直接点击FusionChartsFree下面的来访问。
要想在SAPGUI中显示图表,有以下几个准备工作:
1.选择好你要创建的图形类型对应的SWF文件,放到指定的路径下
2.电脑中要安装Flash软件
3.XML数据文件。
FCF只接受基于XML格式的数据。
因此,你需要把你的数据转成XML格式。
为了便于测试,我们首先在浏览器中对展示图表进行测试。
要做报表,当然要有数据了。
首先我们把数据做成一个叫的XML文件(XML文件可参照测试部分的,不过图形不同,XML格式也可能不同),保存在c:
\FusionCharts\MyFirstChart文件夹路径下。
每个图形都要被放到HTML文件里才能显示,现在,我们把下面的代码保存c:
\FusionCharts\MyFirstChart\文件里。
1.
2.