参考fusioncharts在sapgui中的集成.docx

上传人:b****7 文档编号:8722989 上传时间:2023-02-01 格式:DOCX 页数:47 大小:566.02KB
下载 相关 举报
参考fusioncharts在sapgui中的集成.docx_第1页
第1页 / 共47页
参考fusioncharts在sapgui中的集成.docx_第2页
第2页 / 共47页
参考fusioncharts在sapgui中的集成.docx_第3页
第3页 / 共47页
参考fusioncharts在sapgui中的集成.docx_第4页
第4页 / 共47页
参考fusioncharts在sapgui中的集成.docx_第5页
第5页 / 共47页
点击查看更多>>
下载资源
资源描述

参考fusioncharts在sapgui中的集成.docx

《参考fusioncharts在sapgui中的集成.docx》由会员分享,可在线阅读,更多相关《参考fusioncharts在sapgui中的集成.docx(47页珍藏版)》请在冰豆网上搜索。

参考fusioncharts在sapgui中的集成.docx

参考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控件。

  

    MyFirstchartusingFusionCharts-</p><p>     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">

     

     

      

       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

ThisvariablepassestheXMLembeddedinortag.Thismethodiscalled.ItismutuallyexclusivetodataURLvariable.

*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.      My First FusionCharts  

4.     

5.     

6.      

D27CDB6E-AE6D-11cf-96B8-0000" codebase=" width="600" height="500" id="Column3D" >  

7.           

8.           

9.           

10.           

11.        

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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > 计算机硬件及网络

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1