参考fusioncharts在sapgui中的集成.docx
- 文档编号:8722989
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:47
- 大小:566.02KB
参考fusioncharts在sapgui中的集成.docx
《参考fusioncharts在sapgui中的集成.docx》由会员分享,可在线阅读,更多相关《参考fusioncharts在sapgui中的集成.docx(47页珍藏版)》请在冰豆网上搜索。
参考fusioncharts在sapgui中的集成
一、FusionCharts简介:
FusionCharts是InfoSoftGlobal的一个产品,InfoSoftGlobal公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。
FusionCharts是一个跨平台,跨浏览器的Flash图表组件解决方案,能够被,ASP,PHP,JSP,ColdFusion,RubyonRails,简单HTML页面甚至PPT调用。
你不需要知道任何关于flash编程的知识,你只需要知道你所用的编程语言就可以了。
FusionCharts是一个闪光的图表组件,它可以用来制作数据动画图表,其中动画效果用的是AdobeFlash8(原MacromediaFlash的)制作的Flash,FusionCharts可用于任何网页的脚本语言类似于HTML,.NET,ASP,JSP技术的,PHP,ColdFusion等,提供互动性和强大的图表。
使用XML作为其数据接口,FusionCharts充分利用流体美丽的Flash创建紧凑,互动性和视觉逮捕图表。
FusionChartsv3支持以下图表类型,同时展示相应图表,方便大家直观的认识和应用:
Ø柱状图和直方图-2D和3D
Ø直线图和面积图-2D和3D
Ø饼图和圆环图-2D和3D
Ø散点图和气泡图-只有2D
Ø堆栈图表-2D和3D
Ø双轴图表-2D和3D
Ø组合图表-允许您将直线图、面积图或柱状图在单个图表中组合在一起。
包括2D和3D。
FCF提供了双Y轴组合图,它有两个Y轴,每个轴表示不同的刻度(例如,收益和数量,或者访问量和下载量等等。
)。
图形左边的坐标轴叫主坐标轴,图形右边的叫次坐标轴。
Ø
Ø滚动图-交互式图表,允许您在客户端对数据点进行滚动。
Ø真3D图表-一种独一无二的基于web的图表,允许您在客户端以可视化的方式对摄像头的角度和视角进行更改。
您可以旋转图标,在2D和3D之间来回切换,显示/隐藏标签或完成大量其他图表上的交互任务。
二、原理分析
既然FusionCharts界面这么漂亮、功能这么强大,那如果能与SAPGUI集成起来,对用户的体验提升那肯定是巨大的。
心动了么?
不管你心动没有,反正我心动了。
心动不如行动,那就开始研究吧。
FusionCharts的文档很详细,DEMO也非常多,ASP、J2EE、.NET、PHP……但是最终实现都是调用JavaScript来实现,再看JavaScript代码,OMG,8K多行代码,这挨着看得花不少脑细胞啊,继续找,看是否有更简单直接的方法。
有了,“UsingHTMLembeddingmethod”,既然是直接嵌入那肯定是最简单的方式,再看看例子:
3.对图表的相关参数进行赋值。
2.指定使用的图表使用的FLASH文件位置。
1.构建FlashPlayer控件。
UsingHTMLembeddingmethod-XMLfromURL
classid="clsid: d27cdb6e-ae6d-11cf-96b8-0000" codebase=" /pub/shockwave/cabs/flash/#version=8,0,0,0"> &chartWidth=400&chartHeight=300 &DOMId=myChartId®isterWithJS=1&debugMode=0"> &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 ThisvariablepassestheXMLembeddedin *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. 3. 4. 5.
6.
12.
13.
上面的代码,其实就是一个显示flash的简单标记。
movie参数值指定我们的SWF文件,即,该参数要指定SWF文件的具体路径。
FlashVars参数值用来指定XML文件的路径以及图形的宽和高。
看到这里,如果不熟悉在网页里调用Flash的朋友,可能会有点迷惑,因为我们发现有一个embed参数,它的各个值都和param参数的值是一样的,为什么会这样呢?
其实,这是为了在不同的浏览器里都能运行Flash的一个解决办法。
IE浏览器是使用param参数来运行Flash的,而Netscape则是使用embed参数来运行Flash。
因此,为了保证我们的应用能够在大多数浏览器上运行,我们就需要加上embed参数,并且值和param完全相同。
这样我们运行该HTML文件,就能看到图表了。
测试工作完成后,我们就只要在ABAP程序中安测试的XML整理好XML,swf的路径后,参照第四部分测试调用类zcl_gui_fusionchart.,就可以实现在SAPGUI显示Fusionchart的图表了。
如果很不幸,没有在页面上看到图形,那么可能是下面的原因之一:
没有放到正确的文件夹。
2.在里,SWF的路径设置不正确。
3.没有安装FlashPlayer。
4.没有启用浏览器F
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 参考 fusioncharts sapgui 中的 集成