fusioncharts实现数据动画图表

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

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

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

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

 

 二、装载swf的注意事项

 

1.   装载swf的基本语法

页面必须引用FusionCharts.js

<scripttype="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（文件下载）