最近对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提供的批量导出功能。
分享到:
相关推荐
本文将深入探讨FusionCharts如何实现统计图的导出功能,包括将其保存为图片和PDF格式。 首先,我们需要理解FusionCharts的基本工作原理。FusionCharts利用HTML5的Canvas元素或者SVG(Scalable Vector Graphics)...
在使用FusionCharts时,我们需要在图表配置中启用这个功能,通过设置`exportEnabled`属性为`true`,并配置相应的导出参数,如导出的文件格式、导出按钮的位置和样式等。 在导出为图片的过程中,我们可以利用...
5. **前端触发导出**:在前端,当用户点击导出按钮时,调用FusionCharts的`exportChart()`方法,传递导出格式('excel')和其他选项。 ```javascript document.getElementById('exportBtn').addEventListener('...
本文将详细讲解如何在JSP页面中使用FusionCharts导出图片,包括jpg和pdf格式。 首先,理解FusionCharts的核心概念是关键。FusionCharts是一个基于SVG(Scalable Vector Graphics)的图表库,它支持超过90种不同类型...
标题 "FusionCharts在服务器端导出图片(J2EE版)" 指向的是一个关于如何在Java(J2EE)环境中使用FusionCharts库来实现服务器端图片导出的技术主题。FusionCharts是一个强大的JavaScript图表库,它允许开发者创建交互...
在博文链接中(由于无法直接访问该链接,以下内容基于FusionCharts常见功能推测)可能讲解了如何使用FusionCharts的API和方法来生成图表,并介绍如何实现图表的导出功能。FusionCharts支持导出为多种格式的图片,如...
本文将深入探讨如何利用FusionCharts实现内容与图片的导出功能,特别是将图表及关联内容导出到Word和PDF文档。 首先,FusionCharts的导出功能是通过其内置的ExportManager模块来实现的。这个模块允许用户将图表数据...
3. **配置Web服务**:创建一个Servlet或者RESTful API,用于接收来自前端的图表数据和导出请求。这个服务会调用FCExporter的API来处理数据并生成导出文件。 4. **前端交互**:在FusionCharts3的图表上添加右键菜单...
本实例主要关注如何在Java环境下使用FusionCharts实现服务器端的图片和PDF导出。 首先,为了在服务器端使用JSP进行导出,你需要准备以下文件: 1. `FCExporter.jsp`:这是主要的导出处理器JSP文件。 2. `...
如果你的应用需要处理用户触发的导出请求,你可能需要在服务器端设置一个HTTP端点来接收请求并执行上述导出操作。例如,使用Spring MVC框架,你可以创建一个Controller方法: ```java @RequestMapping(value = "/...
2. **设置导出参数**:FusionCharts对象提供了设置导出属性的方法,例如设置导出格式为Excel、设定导出文件名等。 3. **触发导出**:通过调用FusionCharts对象的特定方法(如`exportChart()`)触发导出操作。这个...
本文将深入探讨如何使用纯JavaScript实现FusionCharts图表的导出功能,包括导出为图片和PDF。 首先,导出FusionCharts图表为图片或PDF的需求在很多场景下都非常常见,例如用户可能希望保存图表以便离线查看,或者将...
Enstein_百度空间.mht"、"FusionCharts V3图表导出图片和PDF属性说明 - zock - 博客园.mht"等文档详细讲解了导出过程和可能出现的问题及解决方案,包括客户端导出和服务器端导出两种方式。 ### 5. FusionCharts参数...
各个功能点和操作说明的对应文件: 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'
导出功能涉及到FusionCharts的Server-Side Export Module,这是一个专门用于处理图表导出请求的服务器端组件。使用这个模块,用户可以直接在浏览器中点击按钮,触发服务器端的导出操作,而无需任何客户端脚本。 ...
实现fusionCharts3.1图表自动导出到服务端,导出在页面访问后4S后进行。 有两个javaweb工程,直接导入MyEclipse再在tomcat中部署后即可直接访问, 请确保你的fusionCharts是3.1版本的 另外还有一个文本文档,里面有...
用过的人都知道FusionCharts生成的图片非常漂亮,那么怎么导出来呢? 大家肯定第一反应是想到了一个属性:exportaction。不过,这个属性提供了服务器端下载以及客户端下载,但是经过我多次试验后发现一个BUG:...
在JSP中,我们可以引入FusionCharts的JavaScript和SWF文件,通过设置XML或JSON数据来生成图表。 要实现导出图片的功能,FusionCharts提供了一个叫做ExportChart的方法,它允许用户将当前显示的图表保存为图像文件。...