1一、一、FusionChartsFusionCharts 简介：简介： Fusion Charts 是 InfoSoft Global 的一个产品，InfoSoft Global 公司是专业的 Flash 图形方案提供商，他们还有几款其他的，基于 Flash 技术的产品，都非常的漂亮。 Fusion Charts 是一个跨平台，跨浏览器的 Flash 图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至 PPT 调用。你不需要知道任何关于 flash 编程的知识，你只需要知道你所用的编程语言就可以了。 Fusion Charts 是一个闪光的图表组件，它可以用来制作数据动画图表，其中动画效果用的是Adobe Flash 8 （原 Macromedia Flash 的）制作的 Flash ， Fusion Charts 可用于任何网页的脚本语言类似于 HTML ， .NET，ASP ， JSP 技术的， PHP ， ColdFusion 等，提供互动性和强大的图表。使用 XML 作为其数据接口， Fusion Charts 充分利用流体美丽的 Flash 创建紧凑，互动性和视觉逮捕图表。 Fusion Charts v3 支持以下图表类型，同时展示相应图表,方便大家直观的认识和应用：柱状图和直方图 - 2D 和 3D 2直线图和面积图 - 2D 和 3D 3饼图和圆环图 - 2D 和 3D 4散点图和气泡图 -只有 2D 堆栈图表- 2D 和 3D 5双轴图表- 2D 和 3D 6组合图表 - 允许您将直线图、面积图或柱状图在单个图表中组合在一起。 包括 2D和 3D。 FCF 提供了双 Y 轴组合图，它有两个 Y 轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。图形左边的坐标轴叫主坐标轴，图形右边的叫次坐标轴。滚动图 - 交互式图表，允许您在客户端对数据点进行滚动。 真 3D 图表- 一种独一无二的基于 web 的图表，允许您在客户端以可视化的方式对摄像头的角度和视角进行更改。 您可以旋转图标，在 2D 和 3D 之间来回切换，显示/隐藏标签或完成大量其他图表上的交互任务。78二、原理分析二、原理分析既然 Fusion Charts 界面这么漂亮、功能这么强大，那如果能与 SAP GUI 集成起来，对用户的体验提升那肯定是巨大的。心动了么？不管你心动没有，反正我心动了。心动不如行动，那就开始研究吧。9Fusion Charts 的文档很详细，DEMO 也非常多，ASP、J2EE、.NET、PHP但是最终实现都是调用 JavaScript 来实现，再看 JavaScript 代码，OMG，8K 多行代码，这挨着看得花不少脑细胞啊，继续找，看是否有更简单直接的方法。有了，“Using HTML embedding method”，既然是直接嵌入那肯定是最简单的方式，再看看例子：My First chart using FusionCharts - Using HTML embedding method - XML from URL/简单明了，省了不少脑细胞。再看看相关的帮助文档：3.对图表的相关参数进行赋值。2.指定使用的图表使用的 FLASH文件位置。1.构建 Flash Player 控件。10When using HTML embedding, all variables to the chart are passed using FlashVars. The table below lists all such variables supported: VariableDescriptiondataURLThis variable takes the path of the XML data file/stream as value. This method is called Data Url method. It is mutually exclusive to dataXML variable.* In case both &dataURL and &dataXML are set to blank or not provided, the chart will search for default Data.xml file in the same path as the HTML file.dataXMLThis variable passes the XML embedded in or tag. This method is called Data String method. It is mutually exclusive to dataURL variable.* In case both &dataURL and &dataXML are set to blank or not provided, the chart will search for default Data.xml file in the same path as the HTML file.DOMIdID for the chart using which it will be recognized in the HTML page. Each chart on the page needs to have a unique ID.chartWidthIntended width for the chart (value in pixels without any px suffix or value in percent with %25 as suffix. %25 is the UrlEncoded form of % sign)chartHeightIntended height for the chart (values in pixels without any px suffix or value in percent with %25 as suffix. %25 is the UrlEncoded form of % sign)debugModeWhether to start the chart in debug mode which shows a Debug Window over the chart. Set it to 1 to show the Debug Window. Please see Debugging your Charts section for more details on Debug Mode. registerWithJS Whether to register the chart with JavaScript. This value should always be set to 1 to get maximum possible access to FusionCharts JavaScript API. But when using OBJECT/EMBED method, only minimal JavaScript functions are available to chart (e.g., setDataURL, setDataXML, print, exportChart etc.) 11scaleModeScaling option of the chart. It can take any value out of the four: “noscale“, “exactfit“, “noborder“ and “showall“. FusionCharts works best in “noScale“ mode. lang(optional) Preferred language for chart messages. e.g. EN. The present supported language is EN i.e. English. Other languages can be added by adding to source code of chart and then compiling it. 现在，我们清楚了 Fusion Charts 的工作原理：构建 Flash player 控件。设置使用的图表对应的 SWF 文件。通过 Flash player 控件的 FlashVars 传入相关参数。三、在三、在 SAP GUI 集成集成 Fusion Charts清楚了工作原理，现在就可以开始在 SAP GUI 中实现 Fusion Charts 的集成了。定义Fusion Charts 的控件,如下：1、 建立控件类建立控件类按 ABAP 里边定义控件的规矩，控件必须继承 CL_GUI_CONTROL。2、定义控件属性、定义控件属性根据 Fusion Charts 的参数，定义相关属性如下：123、定义相关方法。、定义相关方法。4 4、CONSTRUCTORCONSTRUCTOR 方法实现构建方法实现构建 FlashFlash playerplayer 控件的方法，代码如下：控件的方法，代码如下：METHOD constructor.DATA clsid(80).DATA: return, guitype TYPE i.IF clsid IS INITIAL.IF NOT activex IS INITIAL.clsid = D27CDB6E-AE6D-11CF-96B8-444553540000.ELSEIF NOT javabean IS INITIAL.RAISE error.ELSE.RAISE error.ENDIF.ENDIF.CALL METHOD super-constructorEXPORTINGclsid = clsidshell= parentlifetime = lifetimename = nameEXCEPTIONSOTHERS = 1.IF sy-subrc NE 0.RAISE error.ENDIF.CALL METHOD cl_gui_cfw=subscribeEXPORTINGshellid = h_control-shellidref = meEXCEPTIONSOTHERS = 1.IF sy-subrc NE 0.RAISE error.13ENDIF. ENDMETHOD. D27CDB6E-AE6D-11CF-96B8-444553540000比较眼熟吧，在 Fusion Charts 的例子中我们就可以看出这个是 Flash player 控件的 Class ID，继承 CL_GUI_CONTROL 后只需要修改成 Flash Player 对应的 Class ID 就 OK 了，其他的代码直接参考其他控件的构造函数。5 5、实现、实现 SHOW_CHARTSHOW_CHART 函数，该函数负责根据类的属性对函数，该函数负责根据类的属性对 FlashFlash PlayerPlayer 进行赋值。进行赋值。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