Fusioncharts的Client端的导出和Event设置

最近对Fusioncharts做了封装，使得通过对Java对象的操作生成相应的XML文件，然后利用自定义的Tag实现前端展示。开发的时候选择Fusioncharts的版本是free版，但要实现导出图表的功能，而free版不支持导出，所以只能用3.1的破解版。问题来了，free版支持的DOM，在正式版中不支持，并且XML的文件定义也略有不同，原来直接利用DOM XML的数据就能展示的图表现在不行了，无奈只好写Tag来实现展示。所以，各位如果要封装Fusioncharts并且要更多的功能，不如直接购买正版或者用破解版免得走弯路。free版的功能在正式版中不存在，目的也许是为了公测，感觉有点不靠谱。

 

Client的导出功能

 

下面说导出功能，我们的目的是封装Fusioncharts，使其具有通用性，因此不打算使用Server端的导出功能，直接使用Client端的导出。

 

1.引入JS文件，FusionChartsExportComponent.js

 

<script language="JavaScript" src="路径/FusionCharts/FusionChartsExportComponent.js"></script>

 

2.定义图表的时候需要将registerWithJS 置为1，如下：

 

var myChart = new FusionCharts("路径/FusionCharts/Column2D.swf", "myChartId", "500", "300", "0", "1");

 

 

3.配置导出组件和展示，导出组件的名字为fcExporter1，导出按钮将在fcexpDiv这个DIV中进行展示

 

<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>

 

4.Chart的XML数据中需要增加的三个属性，exportHandler为刚才定义的导出组件名称

 

<chart ... exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' ...>
    <set label='Alex' value='25000' />   
    ......
</chart>

 

最简单的配置上面四步就可以搞定，另外还有对导出按钮的样式配置等，详细内容可以参考官方文档：http://www.fusioncharts.com/Docs/ECClientSimple.html

 

 

Fusionchart的Event调用

 

对客户端导出功能一直有个疑问，就是导出按钮的设计。用户未必知道通过右键去点击图片可以有导出选项，放个按钮在图片旁边会让人很疑惑它的作用，是导出按钮吗？是的话为何不允许点？ 所以我觉得比较合理的状况是用户主动触发导出行为，然后显示导出按钮，这样基本上符合大多数人的思维习惯。

 

导出按钮Fusioncharts是这样设置的，开始是disabled状态，触发导出行为后是可点击状态。那么将这个DIV隐藏，然后触发到处行为后展示即可。但导出按钮是Flash组件，即使是DIV hidden，如果Flash组件没有设置的话它还会展示，而且还要在它加载完毕后对其设置。考虑到这些只能利用Fusioncharts的Event来解决问题。

 

通过下面的两个步骤可以实现：

 

1.Flash加载结束后，隐藏导出按钮组件

 

FC_Loaded事件

This event is raised when the chart has finished downloading itself in the user's browser. You can use this to hide any loader components that you might have on your page.

通过描述知道这个正是需要的，于是在页面中增加JS方法，来定义事件处理，另外JS隐藏的是导出组件，不是DIV

 

function FC_Loaded(DOMId){
    document.getElementById('导出组件的名字').style.visibility='hidden';
}

 

2.触发导出行为后展示导出按钮组件

 

FC_Exported 事件

This event is raised when the chart has finished export as server side save or client side download. This is used to know whether the export is successful. It also provides the path (web path for server side save and local path for client side download) where the exported file has been saved.

 触发导出行为后的回调事件，定义处理方法

 

function FC_ExportReady(DOMId){
    document.getElementById('导出组件的名字').style.visibility='visible';
}

 

官方文档中图片导出的回调事件：http://www.fusioncharts.com/Docs/ECClientCallback.html

更多Chart相关的Event可以参考：http://www.fusioncharts.com/Docs/JavaScript/API/Events.html

 

通过上面的步骤我们的需求就基本实现了，如果展示多个图表，那么每个图表都有自己的导出组件。如果有批量导出的需求大家可以再实践一下Fusioncharts提供的批量导出功能。

 

评论

2 楼 yf_footprint 2013-05-15  

   为什么我的导出按扭在导出提示达到100%并且关闭以后没有改成可以状态啊...

1 楼 hotdog 2011-05-18  

备注：
如果用setXMLUrl方式去展示图表，请求Url返回的XML如果没有BOM签名的话中文会显示乱码