flex chart

     Flex是Adobe公司为了让软件设计人员开发flash的一个工具，FLEX具有ajax的一切功能实现数据的异步交互，除此之外FLEX可以设计出超炫的页面来提供给网络用户者，其中著名的特点就是easy的实现了页面控件的拖拽和数据Push技术，并且可以很好的和java结合开发。

Flex chart是Flex组件库中的一个组件，提供了对数据的图形化显示，同时借助flex的外部接口API来实现可JSP之间的数据交互。

在本组件的开发中使用了两个接口来实现数据和Flex组件之间的数据交互，分别是通过flashvars方法和Flex的外部接口ExternalInterface来实现，前者用于在生产flash文件的时候传递数据参数，后者可以在flash对象已经创建的情况下来调用Flex中的方法，从而动态的改变flash中的数据，下面介绍一下操作的步骤：

flex接收flashvars的方法

1、flex接收flashvars的方法和flash不一样在as3中是用“root.loaderInfo.parameters”或“stage.loaderInfo.parameters”来取得传递的参数，而在flex中则要用“Application.application.parameters”来取得。看下面的代码，我们将利用“Application.application.parameters”的方法来取得flashvars传递过来的两个参数：mystr和myTitle。

private function init():void {

      mystr = Application.application.parameters.mystr;//图形显示数据

      myTitle=Application.application.parameters.myTitle;//图形显示标题

}

Mystr包含了图形数据的详细信息，包括了数据显示XY坐标的名称和值，中间以“,”来间隔，在Flex中通过对数据的切割处理填充到图形组件中去，myTitle则显示了图形的标题

2、对于Flex组件的调用和操作flash方法一样，生成Flash对象。在本项目中的chart目录下存在一个JSP文件FusionChartsHTMLRenderer.jsp，它的功能就是为了生成一个Flash 的object对象。通过在程序中获得相应的参数，传递给FusionChartsHTMLRenderer.jsp生成flash，具体实现代码如下：

var title_pie='客户地区分布';

var str_pie="chartSWF=chart_pie.swf&mystr="+s_pie+"&myTitle="+title_pie+"&chartId=pie&chartWidth=720&chartHeight=300&debugMode=false";

document.getElementById("pie").src="../../chart/FusionChartsHTMLRenderer.jsp?"+str_pie;

ExternalInterface接口实现对Flex对象的实时操作

    ExternalInterface接口的使用可以在已经生成好了flash对象的情况下需要改变flash中的数据而提供的一种数据接口，例如在以月份来显示统计信息的时候，通过调用该接口可以动态的改变图形组件的数据，同时不需要刷新页面和重新生成Flash对象，提高了系统交互的数率。ExternalInterface接口的原理如下：

     1、首先在flex程序中申明一个外部的接口，提供给用户调用Flex中的方法，实现数据的填充

    //调用外部的接口

    import flash.external.,;

    private function init():void

     {  //flex生成对象的时候自动实现外部调用函数和flex方法的映射，myFlexChart为外部调用方法，myFun为Flex中方法

        ExternalInterface.addCallback("myFlexChart"myFunc);

        }

      2、在本例中myFunc主要实现的功能是数据字符串Str的分解和转换成数组赋值给相应的图形组件

       public function myFunc(str:Stringtitle:String):String {

           this.currentState="";

           StringToArray(str2title);

            return str;

      }

   3、开发者在JSP中首先要生成一个Flash的对象，然后调用flash对象中的方法。在JSP中生成一个Flash对象：

<script language="javascript">                             CreateFlash("chart_pie""../../chart/chart_pie.swf"720300"");

      2.然后在调用其中的方法：document.getElementById("chart_pie").myFlexChart(strtitle);具体的参数配置在下面介绍。

 

 

可能存在的问题和解决方案：

1、考虑到测试中调用ajax可能出现的数据异步导致flash还没有申明外界接口或是参数没有取出的情况，在编写代码的时候，使用 setTimeout来延迟1500实现数据读取方法的调用

2、其次部署在window server2003中的程序容易导致flash中的方法无法识别，在读取生成flash参数的时候不使用ajax来交互，而是在action中书写一个static的方法，来前台js调用。

 

参数说明：

     在本例中目前开发了3种Flex组件，包含了5个flash文件分别对用了柱形，饼形和线性三种表，其中柱形，线性包含一维表和二维表

 

Flex组件名	方法定义	参数的定义
chart_pie.swf	flashva传入str:Stringtitle:String，以及flash对象的长和宽	str为数据信息，格式如下： x坐标名称;Y坐标名称；x值；y值（注意最后一位没有分号） 例：时间,地区,思明,45,集美,74,翔安,44,湖里,12,湖里1,12
	myFlexChart(str:Stringtitle:String)	title  为图表的标题
chart_column.swf	flashva传入str:Stringtitle:String以及flash对象的长和宽	str为数据信息，格式如下： x坐标名称,Y坐标名称,x值,y值（注意最后一位没有分号） 例：时间,已受众客户,2009年02月,12222,2009年03月,44444,2009年04月,145465
	myFlexChart(str:Stringtitle:String)	title  为图表的标题
chart_column2.swf	flashva传入str:Stringtitle:String	str为数据信息，格式如下： x坐标名称,Y1坐标名称,Y2坐标名称,x值,y1值,y2值（注意最后一位没有分号） 例：时间,已受众客户,反馈客户数,2009年02月,168524,12222,2009年03月,45465,44444
chart_line.swf	myFlexChart(str:Stringtitle:String)	title  为图表的标题
	flashva传入str:Stringtitle:String以及flash对象的长和宽	str为数据信息，格式如下： x坐标名称,Y坐标名称,x值,y值（注意最后一位没有分号） 例：时间,已受众客户,2009年02月,12222,2009年03月,44444,2009年04月,145465
	myFlexChart(str:Stringtitle:String)	title  为图表的标题
chart_line2.swf	flashva传入str:Stringtitle:String以及flash对象的长和宽	str为数据信息，格式如下： x坐标名称,Y1坐标名称,Y2坐标名称,x值,y1值,y2值（注意最后一位没有分号） 例：时间,已受众客户,反馈客户数,2009年02月,168524,12222,2009年03月,45465,44444
	myFlexChart(str:Stringtitle:String)	title  为图表的标题