最近对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提供的批量导出功能。
分享到:
相关推荐
NULL 博文链接:https://angrycoder.iteye.com/blog/1664058
FusionCharts jsp页面 导出jpg pdf图片,有的例子
fusionCharts导出相关资料打包,包含自动将图表导出为图片,而不再用右键单击的方式来生成图片,更便于控制
FusionCharts 导出内容+图片到word,导出到pdf等功能。
各个功能点和操作说明的对应文件: 1. 导出图片: ... 2. 导出图片到word: ... 导出图片和内容到word: word_content_pic.html 直接导出 4.direct_pic.html 多图导出 5.word_content_pic.html
1、使用fusioncharts可以轻松实现图片导出功能。 2、调用代码:exportEnabled='1' exportAtClient='0' exportHandler='FCExporter.aspx'
NULL 博文链接:https://zhanglun1225.iteye.com/blog/1334981
实现fusionCharts3.1图表自动导出到服务端,导出在页面访问后4S后进行。 有两个javaweb工程,直接导入MyEclipse再在tomcat中部署后即可直接访问, 请确保你的fusionCharts是3.1版本的 另外还有一个文本文档,里面有...
自己项目中遇到的图表导出到excel,从网上没找到资源就自己写了个
用过的人都知道FusionCharts生成的图片非常漂亮,那么怎么导出来呢? 大家肯定第一反应是想到了一个属性:exportaction。不过,这个属性提供了服务器端下载以及客户端下载,但是经过我多次试验后发现一个BUG:...
FusionCharts导出图片实例java版[参照].pdf
Java 实现 FusionCharts 图表导出图片或PDF文件功能,经典示例源码!
fusioncharts 导出保存图片 绝对能运行 2种方式保存 提供服务器保存 和 客户端保存 test.jsp 和 test.html是客户端保存 index.jsp是服务器端保存(请参见fusioncharts_export.properties) 请在服务端运行程序!!...
Java项目!可更改保存报表的路径!使用fusioncharts 通过javascript 提交报表图片!将图片保存到服务器后可以自己写代码!导出Excel、world等!参考文献http://blog.csdn.net/wangxw8746/article/details/27674471
需要用到第三方jar包FCExporter,刚开始一直以为静态页面能实现,废了好多功夫。发布为web项目,简单一配置就成功了,擦! 有用到的拿去吧
FusionCharts V3.2 导出图片操作指南 java 版
NULL 博文链接:https://shihuan830619.iteye.com/blog/833813
没有网络情况下fusioncharts离线导出服务,导出图片,excel,等等