快捷搜索: 王者荣耀 脱发

Java 实现 FusionCharts 图表导出图片或PDF文件功能

第一步:引入FusionCharts文件,使用的版本为:FusionCharts 3.2.1(额,共享版,你懂的,后续提供下载链接)支持正版,官网地址:

第二步:引入fcexporter.jar包(图片导出功能库),并在web.xml文件中配置以下代码

<servlet>
    <display-name>FCExporter</display-name>
    <servlet-name>FCExporter</servlet-name>
    <servlet-class>com.fusioncharts.exporter.servlet.FCExporter</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>FCExporter</servlet-name>
    <url-pattern>/FCExporter</url-pattern>
</servlet-mapping>

第三步:添加测试xml文件,实际开发中应使用动态URL模式,否则浏览器会有缓存

<chart baseFont=Arial baseFontSize=12 decimals=0
	exportEnabled=1 exportAtClient=0 exportAction=download
	exportDialogMessage=正在导出,请稍候... exportHandler=FCExporter
	exportShowMenuItem=1 exportFormats=JPG=导出为 JPG 图片|PNG=导出为 PNG 图片|PDF=导出为 PDF 文件
	formatNumberScale=0 showValues=1 caption=各品目年度销售总额分布图 subCaption=2014年
	exportFileName=2014年各品目年度销售总额分布图 palette=4 numberPrefix=¥>
	<categories>
		<category label=01></category>
		<category label=02></category>
		<category label=03></category>
		<category label=04></category>
		<category label=05></category>
		<category label=06></category>
		<category label=07></category>
		<category label=08></category>
		<category label=09></category>
		<category label=10></category>
		<category label=11></category>
		<category label=12></category>
	</categories>
	<set label=移动硬盘 value=3200000></set>
	<set label=台式计算机 value=3200000></set>
	<set label=多功能一体机 value=4600000></set>
</chart>
第四步:编写JSP文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Fusion Chart</title>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/plugins/FusionCharts 3.2.1/Scripts/FusionCharts.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/plugins/FusionCharts 3.2.1/Scripts/FusionChartsExportComponent.js"></script>
	<script type="text/javascript">
		$(function () {
			var chart = new FusionCharts("${pageContext.request.contextPath}/plugins/FusionCharts 3.2.1/Charts/Pie3D.swf", "chart", "720", "420");
			chart.setDataURL("${pageContext.request.contextPath}/database/chartData.xml");
			chart.render("divChart");
		});
	</script>
</head>
<body>
	<div id="divChart"></div>
</body>
</html>
第五步:启动项目,查看效果吧~

完整示例下载地址:

经验分享 程序员 微信小程序 职场和发展