FusionCharts导出图片

最新推荐文章于 2024-09-17 08:44:03 发布

老虎_tiger

最新推荐文章于 2024-09-17 08:44:03 发布

阅读量4.5k

点赞数

分类专栏：前端技术 Java 文章标签： fusioncharts 报表图片

本文链接：https://blog.csdn.net/liuyuehu/article/details/39317707

版权

Java 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端技术

7 篇文章 0 订阅

订阅专栏

我使用的FusionCharts3.2的版本，FusionCharts3.2和FusionCharts3.1的差别就是FusionCharts3.2使用起来更简单方便。

可以直接参考你下载下来的FusionCharts_Evaluation\ExportHandlers\J2EE\Readme.txt文件。Readme.txt也详细的讲解的使用的步骤。只不过是英文的。

第一步：准备一些需要的文件。

1、准备flash文件。所有的Flash文件都在你下载的包的Charts目录下。比如Column3D.swf文件。放到Webroot你指定的文件夹下面。

2、准备JS文件。在你下载的文件\JSClass下面的Legacy中，有两个JS文件。如图的这两个文件。如果你下载的没有这个目录，请直接搜索这两个文件。

3、FusionCharts Export Component（客户端）：文件，也copy到你知道的webroot下面。FCExporter.swf在你下载的包的Charts目录下。

4、copy需要的jar包。fcexporter.jar和fcexporthandler.jar。如果是JDK1.4，导入对应的1.4的jar包。如图：

第二步：配置

1、copy class下面的fusioncharts_export.properties文件在你下载的Code\J2EE\WEB-INF\classes文件下。【修改里面的属性】

                                 SAVEPATH=./images，服务器上保存图片的目录，需写入权限
                                  HTTP_URI=http://www.yourdomain.com:port/images/，访问HTTP路径
                                  OVERWRITEFILE=true/false，是否可覆盖？
                                  INTELLIGENTFILENAMING=true/false
                                  FILESUFFIXFORMAT=TIMESTAMP

注意：RESOURCEPATH 配置的是FCExporter_IMG.jsp、FCExporter_PDF.jsp两个文件所在的路径(我的 FCExporter_IMG.jsp、FCExporter_PDF.jsp文件放在了WebRoot下面的Resources文件夹里了)，SAVEPATH 配置的是导出图片保存路径(需要在工程里事先建好)，HTTP_URI 配置的是保存图片的服务器的绝对路径。（其他的属性不要变，否则会出问题）
2、配置web.xml，主要是配置一个servlet。如下

<servlet>
	    <display-name>FCExporter</display-name>
	    <servlet-name>FCExporter</servlet-name>
	    <servlet-class>com.fusioncharts.exporter.servlet.FCExporter</servlet-class>
	    <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
	    <servlet-name>FCExporter</servlet-name>
	    <url-pattern>/FCExporter/jsp</url-pattern>
    </servlet-mapping>

三、JSP页面

<%@page contentType="text/html;charset=GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Insert title here</title>
<SCRIPT type="text/javascript" src="<%=baseURL%>/zjxf/js/FusionCharts/FusionCharts.js"></SCRIPT>
<script language="text/javascript" src="<%=baseURL%>/zjxf/js/FusionCharts/FusionChartsExportComponent.js"></script>
</head>
<body>
	<div id="chartReport">报表展示在这里</div>
	<div>
		<a href="javascript:saveChart();">保存图片</a>   
		<a href="javascript:printChart();">打印图片</a>   
		<a href="javascript:void(0);" οnclick="window.close();">关闭窗口</a>
	</div>

	<script type="text/javascript"> 
		var column3D1 = null;
	
		function onladReport(city,startDate,endDate){
			$.ajax({
				timeout:60000,
				type:'post',
				url:'<%=baseURL%>/zjxfItemAction.do?method=reportLetterCount',
				dataType:'text',
				data: {city:city,startDate:startDate,endDate:endDate},
				success:function (data) {
					column3D1 = new FusionCharts(baseURL + "/zjxf/3d/ScrollLine2D.swf", "myChartId", "100%", "550");
		    		column3D1.setDataXML(data);
		    		column3D1.render("letterReport");
		        }
		    });
		}
		onladReport();
	
    	  
    
	    //回条函数
	    function FC_Exported(objRtn){ 
	    	if (objRtn.statusCode == "1"){ 
	    		alert("成功"); 
	    	} else { 
	    		alert("失败" + objRtn.statusMessage) 
	    	} 
	    } 
	    
	    //保存chart 
	    function saveChart(){ 
		    var chartObject = getChartFromId("myChartId"); 
		    if( chartObject.hasRendered() ){
		    	chartObject.exportChart(); 
		    }
	    } 
	    
	    //打印chart 
	    function printChart(){ 
		    var chartToPrint = getChartFromId("myChartId"); 
		    chartToPrint.print(); 
	    }         
</script>
</body>
</html>

所有的都搞到了。

给个链接：http://shihuan830619.iteye.com/blog/833813

和他们写法上都大同小异。都是一样的配置方式。