Fusion Charts导出图片或Pdf

最新推荐文章于 2022-10-25 02:32:26 发布

X-rapido

最新推荐文章于 2022-10-25 02:32:26 发布

阅读量1.4k

点赞数

分类专栏： FusionCharts 文章标签： Fusion Charts

本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8265198

版权

FusionCharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

查看原文：http://www.ibloger.net/article/176.html

Fusion Charts设置报表，的确很好用，这里就写一个简单的demo，功能实现一个客户端导出效果

Fusion Charts报表数据是以json数据和xml数据进行控制加载的，这里我们使用xml做演示

客户端下载必要的文件有：

（1）图形文件：如，Pie2D.swf,Column.swf等。

（2）FusionCharts.js 核心文件

（3）FusionChartsExportComponent.js 导出文件必备

（4）FCExporter.swf 导出文件必备

当你出现在您的网页上的多个图表，有三种方式导出使用“导出组件：

One to one - 在页面中的每个图都有它自己的实例出口组件和出口相同。这是最简单的设置，使您可以将导出UI为每个图表无论你希望它是。
Many to one- 在这种模式下，只有一个出口组件的实例。多图他们的数据导出到这个实例。这个实例，然后显示一个UI，其中用户可以选择要保存的图表，以及作为导出格式。
Batch Export Mode - 在这种模式下，再出口组件只有一个实例。多图他们的数据导出到这个实例。所不同的是，在此模式下，输出文件可以是一个单一的文件（即包含所有的图表的图像）。此外，有一些API，可以帮助您自动导出在页面中的所有图表。

我们的示例是做一个One to one的demo，随后的2中方式，请等待下篇...

（1）编写simple.xml文件，注意，编码修改为gbk，否则在界面右键时会成为乱码效果

这里我们将exportEnabled设为1 ，exportAtClient设为1，

其中exportHandler=“fcExporter1”与Exporting.jsp页面中的var myExportComponent = new FusionChartsExportObject("fcExporter1","<%=basePath%>eissys/Charts/FCExporter.swf");对应

<?xml version="1.0" encoding="gbk"?>
<!-- 这里的编码方式设为gbk， 默认的utf-8方式貌似会乱码，具体原因调查当中 -->
<chart yAxisName='销售图' caption='销售前5人' exportDialogMessage='正在导出,请稍候...'
	exportFormats='JPEG=导出为JPG图片|PNG=导出为PNG图片|PDF=导出为PDF文件' numberPrefix='$'
	useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0' exportEnabled='1'
	exportAtClient='1' exportHandler='fcExporter1' exportDialogColor='e1f5ff'
	exportDialogBorderColor='0372ab' exportDialogFontColor='0372ab'
	exportDialogPBColor='0372ab'>

	<set label='亚历克斯' value='25000' />
	<set label='马克' value='35000' />
	<set label='大卫' value='42300' />
	<set label='格雷厄姆' value='35300' />
	<set label='约翰' value='31300' />
</chart>

（2）编写Exporting.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<%=basePath%>/eissys/Charts/FusionCharts.js"></script>
<script type="text/javascript" src="<%=basePath%>/eissys/Charts/FusionChartsExportComponent.js"></script>
<script type="text/javascript">
//默认被调用的回调函数，当用户完成他的磁盘保存导出的输出 
function FC_Exported(objRtn){
	if (objRtn.statusCode=="1"){
		alert("图已成功保存。它的DOM ID为 " + objRtn.DOMId);
	} else{
		alert("保存图表的错误。错误消息是: " + objRtn.statusMessage + ". 它的DOM ID为" + objRtn.DOMId);
	}
}

// 完成捕获阶段加载完后自动调用的函数
function FC_ExportReady(DOMId){
    alert("图DOM ID为： " + DOMId + "已完成拍摄模式。现在已经准备好下载。");
}

//定义一个函数，它会被调用，当用户点击批量出口，启动按钮    调用BeginExport（）API的批处理方法. 
function initiateExport(){
	myExportComponent.BeginExport();    
}
</script>
</head>
<body bgcolor="#ffffff">
	<div id="chartdiv" align="center">图表将出现在这个DIV。该文本将被替换由图</div>
	<script type="text/javascript">
		var myChart = new FusionCharts("<%=basePath%>eissys/Charts/Column2D.swf", "myChartId", "500", "300", "0", "1");
		myChart.setDataURL("SimpleExample.xml");
		myChart.render("chartdiv");
	</script>
	<div id="fcexpDiv" align="center">FusionCharts的出口处理程序组件...</div>
	<script type="text/javascript">
		var myExportComponent = new FusionChartsExportObject("fcExporter1","<%=basePath%>eissys/Charts/FCExporter.swf");
		myExportComponent.Render("fcexpDiv");
	</script>
	
	
	<div id="chartdiv2" align="center">图表将出现在这个DIV。该文本将被替换由图</div>
	<script type="text/javascript">
		var myChart2 = new FusionCharts("<%=basePath%>eissys/Charts/Column3D.swf","myChartId2", "500", "300", "0", "1");
		myChart2.setDataURL("SimpleExample2.xml");
		myChart2.render("chartdiv2");
	</script>
	<div id="fcexpDiv2" align="center">FusionCharts的出口处理程序组件...</div>
	<script type="text/javascript">
		var myExportComponent2 = new FusionChartsExportObject("fcExporter2","<%=basePath%>eissys/Charts/FCExporter.swf");
		myExportComponent2.Render("fcexpDiv2");
	</script>
</body>
</html>

（3）最终的运行效果如图显示:

（4）这时候的Waiting会变为save文本，点击即可保存

参数列表

属性名称	值类型	描述
exportHandler	string	在服务器端出口的情况下，这指的是服务器端的出口处理程序（准备使用我们提供的脚本）的路径。在客户端出口的情况下，这指的是DOM-ID在你的网页中嵌入FusionCharts的导出组件，以及与图表
exportAtClient	boolean (0/1)	是否使用客户端的出口处理程序，或服务器端导出处理程序注意:默认值设置为0，这意味着出口应该是在服务器端完成
showExportDialog	boolean (0/1)	是否显示在捕获阶段的出口对话框。如果没有，图表，开始捕获过程没有对话框可见
exportFormat	string ('PNG' / 'JPG' / 'PDF')	您可以选择图表的格式导出
exportFileName	string	使用这个属性，你可以指定要导出的文件名（包括扩展名）。在服务器端保存导出指定这个属性必须提供的目标文件将被保存到服务器上的相对路径，例如“。。/画廊/图表/ myExpenseChart"
exportAction	string ('download' / 'save')	在服务器端出口的情况下，指定是否导出的图像将被发送回客户端的下载，或者它是否会被保存在服务器上的行动注意:是仅适用于服务器端的出口
exportTargetWindow	string ('_self' / '_blank')	在服务器端的情况下，出口和使用下载的行动，这可以让你配置是否返回图像/ PDF会在同一个窗口中打开的（作为附件下载），或是否会打开一个新的窗口。注意:是仅适用于服务器端的出口
exportCallback	string	此属性指定名称的回调JavaScript函数将被调用时，出口事件完成。内部的JavaScript函数FC_Exported 是默认的方法将被调用时没有指定值