fusioncharts实现数据动画图表

一、 FusionCharts构成的基本三要素：swf，data，承载图表的载体。

   Swf：Charts文件夹下面的所有swf文件，需要什么样的图表样式，就加在与之相对应的swf文件。

   Data：数据源。数据可以是*.xml, *.json 文件，也可以是代码中xml或json格式的数据。

    载体：页面中装载 swf 的空间组件。 Eg ： div ， span 等等。

 

  二、装载swf的注意事项

 

1.   装载swf的基本语法

页面必须引用 FusionCharts.js

< script type = "text/javascript"  src="../ FusionCharts.js"></script>

 

< div  id="chartdiv">FusionCharts will be loaded here!</div>

 

< script  type="text/javascript">

var  chart =  new  FusionCharts( "../FusionCharts/Column3D.swf" ,  "chartid" ,    "400" ,  "300" ,  "0" ,  "1" );

       chart.setDataURL( "../FusionData/LinkjavascriptData.xml" );

       chart.render( "chartdiv" );

      

</ script >

 

Column3D.swf ：所要展现的图表类型

LinkjavascriptData.xml ：图表引用的数据源

 

FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”) ： debugmodel  通常设置为 0 ， registerwithjs 通常设置为 1.

  2.   基本数据格式

XML 文件 <chart> 开头，以 </chart> 结束；或者以 <graph> 开头，以 </graph> 结束。

XML 标签属性有以下四种数据类型：布尔型、数字型、字符型、十六进制颜色代码（只支持十六进制的颜色表示，且去掉前面的 # 号）

 

Eg ：

<? xml  version="1.0" encoding="UTF-8"?>

< chart  caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'

    placeValuesInside='1' useRoundEdges='1' showBorder='1' exportEnabled="1"     exportHandler="fcExporter1" exportAtClient="1"exportFormats="JPEG=jpg|PDF=pdf">

     < set  label='Week 1' value='14400' displayValue='good' />

     < set  label='Week 2' value='19600' />

     < set  label='Week 3' value='24000' />

     < set  label='Week 4' value='15700' />

 

 

     < sytles >

        < definition >

            < sytle  name='myBevel' type='Bevel' />

        </ definition >

        < application >

        < apply  toObject='Background' styles='myBevel'/>

        </ application >

      

     </ sytles >

</ chart >

 

该 data.xml 运行的结果如下：

  三、 Charts文件中的swf文件及运行结果图（略）

四、结合javascript的应用

1.    前提：

置 FusionCharts 中的 registerwithjs 为 1. （实际中似乎 0 也可以，但最好用 1 ）

2.    事件：

1)          FC_Loaded(DOMId) ：描述当 SWF 文件在客户端已经完成下载

2)          FC_Rendered(DOMId) ：描述 swf 装载完成。

3)          FC_DataRendered(DOMId) ：描述当图表数据已经下载到 dataxml 或者 dataURL

4)          FC_DataLoadError(DOMId) ：描述当从特定的 URL 下载数据发生错误

5)          FC_NoDataToDisplay(DOMId) ：描述当下载的 xml 文件里没有可显示的数据

6)          FC_DataXMLInvalid(DOMId) ：描述 xml 格式错误

3.    方法

1)          setDataXML(strDataXML:string): 改变图表的数据

2)          setDataXML(strDataXML:string): 改变图表的数据

3)          setDataURL(strDataURL:string) ：同上

4)          print() ：打印图表

5)          getXML() ：返回图表的 xml 数据

6)          getChartAttribute(attrNamr:string) ：返回 xml <chart> 标记的属性

7)          hasRendered() ：布尔型，标志图表是否已经呈现成功

8)    getDataAsCSV() ：返回图表的数据位 CSV 字符型

五、热点链接：link=’’

四种链接方式：

1.          链接到同一个窗口： link=' 指定页面 %3F 参数 ' (link=’index.html?param’)

2.          链接到新的窗口： link='n- 指定页面 %3F 参数 ' (link=’n-index.html?param’)

3.          链接到一个指定的 frame ： link='F-FrameName- 指定页面 %3F 参数 ' （注参数一般不能超过两个，当超过两个则必须追加为一个字符串用逗号分隔）

4.          链接到一个弹出框： link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan"

5.          整个图表链接： clickURL=' 指定路径 '

6.          链接到 Js  ： link="j-function()"

7.          Click  事件处理： link='S-parameter' （此方法是整个图表的链接情况）

  六、图表数据导出

1.          使用 context menu ：设置属性 showExportDataMenuItem='1' ，并可以通过 exportDataMenuItemLabel=” ” 设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了，然后打开记事本之类的东东就可以把数据粘贴到上面去了。

Eg:

Data.xml

< chart  caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'

    placeValuesInside='1' useRoundEdges='1' showBorder='1' showExportDataMenuItem='1'

    >

     < set  label='Week 1' value='14400' displayValue='good' />

     < set  label='Week 2' value='19600' />

     < set  label='Week 3' value='24000' />

     < set  label='Week 4' value='15700' />

</ chart >

显示：在图标上右击，有 Copy data to clipboard.

2.          使用 JavaScript Menu ：首先置 registerWithJS 为 1 ，即 var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1") 。然后根据 charts 节点 id 获得一个对象，使用 var chartObj = getChartFromId("chart1Id") 方法。最后从这个对象取出图表里的数据，使用 chartObj.getDataAsCSV( ), 然后就可以进行你需要的处理了

  七、表导出为pdf或者图片（JPEG和PNG）形式

1、服务器端图表导出

1)          把 jar 包放到 lib 下面

2)          把 classes 文件发布到 web-info 下面

3)          在 data.xml 文件里加入 exportEnabled='1'( 允许导出 ) 、 exportHandler='JSP/FCExporter.jsp'( 即处理导出的路径，注意：默认是在跟 data.xml 在同一个跟目录下面 ) 、还可以设置 exportAction （选择导出的图片会到客户端作为下载还是直接保存到服务器）、 exportAtClient （选择是选择客户端导出还是选择服务器端导出）等属性

4)          把 FCExporter.jsp 、 FCExporterError.jsp 放在 web 工程下面（注意： FCExporter.jsp 里 WEB_ROOT_PATH 的路径，默认情况是 Resources 文件直接放在 web 工程下的，若将 Resources 文件放在其他文件包下面时注意修改 WEB_ROOT_PATH 路径

5)          处理流程： data.xml 中指明 exportHandler 路径。触发导出时转向 exportHandler 所指向的路径 FCExporter.jsp ，在 FCExporter.jsp 中调用 FusionChartsExportHelper.class 中的 HttpServletRequest 类将 data.xml 中的数据以流的形式传进来，将 charts 的宽度、高度、颜色、 domid 作为元数据传入。并且根据选择是导出 pdf 还是图片导向 resource 下面的不同页面路径。（导出时会遇到数据传入的数据为空的情况，推荐使用客户端图表导出的方法）

2、客户端图表导出

1)          包含 FusionChartsExportComponent.js 文件

2)          包含 FCExporter.swf 文件

3)          设置 xml 文件里的一下属性： exportEnabled='1' （允许导出）  exportAtClient='1'  （客户端导出方式） exportHandler='fcExporter1' （处理导出）

4)          Html 文件里加入

<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>

<script type="text/javascript">

Var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");     

myExportComponent.Render("fcexpDiv");

</script>

 3、批图表导出处理：

1)          前提：要批导出的数据共用一个 xml 文件，即共用数据。

2)          与单个导出的不同之处：

Ø  myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];

Ø  用 sourceCharts 方法包含需导出的所以图表 DOMid

Ø  设置导出图片相关的属性： componentAttributes 。 
http://dl.vmall.com/c0s6x9habn（文件下载）