[align=left]FusionChartsV3.2导出图片操作指南（java版）
（网络ID：gadfly80，QQ：6982392 Email：yufeihao@hotmail.com）[/align]
查阅了FusionCharts的帮助文档Exporting as Image/PDF部分，再结合搜索到网络资料（网络上最新的资料只有V3.1，参考价值有限），并将自己实际操作过程和体会整理记录，供大家参考。
一、必须的FusionCharts文件
1、图形Swf文件：将Download Package>Charts目录下需要的图形swf（如Pie2D.swf）文件拷贝到系统的web的特定目录（/web/FusionCharts/）下。
2、FusionCharts JavaScript class：FusionCharts.js，将其从Download Package>Charts拷贝到web/FusionCharts/下。
3、FusionCharts Export Handlers（服务器端）：参见Download Package > ExportHandlers > J2EE 目录，配置方法见下文。
4、FusionCharts Export Component（客户端）：FCExporter.swf，路径为Download Package > Charts，拷贝到/web/FusionCharts下。
5、FusionCharts Export Component JavaScript class：FusionChartsExportComponent.js，将其从Download Package>Charts拷贝到/web/FusionCharts/下。
二、FusionCharts Export Handlers（服务器端）配置
特别说明一下，FusionCharts V3.2与以前版本（如V3.1）有很大不同，应该说配置更简单了，具体可参见Download Package > ExportHandlers > j2EE >Readme.txt。
在服务器端需要三个文件：
1. fcexporter.jar (contains all the dependency classes)
2. fcexporthandler.jar (contains the export handler servlet and resources)：
3. /classes/fusioncharts_export.properties (configuration file)
配置过程：
1、拷贝文件：将Download Package > ExportHandlers > j2EE下的fcexporter.jar、fcexporthandler.jar拷贝到WEB-INF/lib下，将Download Package > Code> J2EE> WEB-INF> classes下的fusioncharts_export.properties拷贝到WEB-INF/classes。
该jar包在JDK1.5下测试通过，还提供了JDK1.4的jar包。
2、配置web.xml
增加FCExporter servlet映射到应用配置web文件：
<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</url-pattern>
</servlet-mapping>
注：url-pattern的值按应用需要修改。
3、数据XML中增加属性：exportHandler='FCExporter'，导出处理程序指向到FCExporter，可根据应用需要修改。
4、保存服务器端的配置文件。
修改fusioncharts_export.properties：
SAVEPATH=./images，服务器上保存图片的目录，需写入权限
HTTP_URI=http://www.yourdomain.com:port/images/，访问HTTP路径
OVERWRITEFILE=true/false，是否可覆盖？
INTELLIGENTFILENAMING=true/false
FILESUFFIXFORMAT=TIMESTAMP
三、FusionCharts 显示图形JSP文件
<%@page contentType="text/html;charset=UTF-8"%>
<!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="./FusionCharts/FusionCharts.js"></SCRIPT>
<script language="text/javascript" src="./FusionCharts/FusionChartsExportComponent.js"></script>
</head>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<div style="margin: 10px 0; border: solid 2px #ccddff; height: 24px; vertical-align: middle;
line-height: 24px; padding-top: 4px;">
<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 myChart = new FusionCharts( "./FusionCharts/MSColumn3DLineDY.swf", "myChartId", "800", "600", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
function FC_Exported(objRtn){
if (objRtn.statusCode == "1"){
alert("The chart was successfully saved on server. The file can be accessed from " + objRtn.fileName);
}
else{
alert("The chart could not be saved on server. There was an error. Description : " + objRtn.statusMessage);
}
}
//保存chart
function saveChart(){
var chartObject = getChartFromId("myChartId");
//chartToSave.saveAsImage();
if( chartObject.hasRendered() ) chartObject.exportChart();
}
//打印chart
function printChart(){
var chartToPrint = getChartFromId("myChartId");
chartToPrint.print();
}
</script>
</body>
</html>
四、数据XML文件配置
<chart caption='Product Sales & Downloads'
showValues='0' PYAxisName='Sales' SYAxisName='Total Downloads' unescapeLinks='0'
exportHandler='FCExporter' exportFileName='MyFileName' exportCallback='FC_Exported'
exportEnabled='1' exportAtClient='0' exportAction='download'
>
。。。。
</chart>
五、保存图片效果截图
[img]http://dl.iteye.com/upload/attachment/541888/a5d35522-5bc1-3ee2-9a89-6d9d03131e9f.jpg[/img]
图1 右键弹出菜单驱动方式
[img]http://dl.iteye.com/upload/attachment/541890/49052dcf-d766-3890-9041-c1e1aca30805.jpg[/img]
图2 捕获数据处理过程
[img]http://dl.iteye.com/upload/attachment/541892/a03608c2-7c2b-38f3-8c76-040971fda678.jpg[/img]
图3 保存jpg图片
[img]http://dl.iteye.com/upload/attachment/541894/d63f7084-d977-359f-a6e1-71852b81549f.jpg[/img]
图4 Javascript驱动方式保存图片
（网络ID：gadfly80，QQ：6982392 Email：yufeihao@hotmail.com）[/align]
查阅了FusionCharts的帮助文档Exporting as Image/PDF部分，再结合搜索到网络资料（网络上最新的资料只有V3.1，参考价值有限），并将自己实际操作过程和体会整理记录，供大家参考。
一、必须的FusionCharts文件
1、图形Swf文件：将Download Package>Charts目录下需要的图形swf（如Pie2D.swf）文件拷贝到系统的web的特定目录（/web/FusionCharts/）下。
2、FusionCharts JavaScript class：FusionCharts.js，将其从Download Package>Charts拷贝到web/FusionCharts/下。
3、FusionCharts Export Handlers（服务器端）：参见Download Package > ExportHandlers > J2EE 目录，配置方法见下文。
4、FusionCharts Export Component（客户端）：FCExporter.swf，路径为Download Package > Charts，拷贝到/web/FusionCharts下。
5、FusionCharts Export Component JavaScript class：FusionChartsExportComponent.js，将其从Download Package>Charts拷贝到/web/FusionCharts/下。
二、FusionCharts Export Handlers（服务器端）配置
特别说明一下，FusionCharts V3.2与以前版本（如V3.1）有很大不同，应该说配置更简单了，具体可参见Download Package > ExportHandlers > j2EE >Readme.txt。
在服务器端需要三个文件：
1. fcexporter.jar (contains all the dependency classes)
2. fcexporthandler.jar (contains the export handler servlet and resources)：
3. /classes/fusioncharts_export.properties (configuration file)
配置过程：
1、拷贝文件：将Download Package > ExportHandlers > j2EE下的fcexporter.jar、fcexporthandler.jar拷贝到WEB-INF/lib下，将Download Package > Code> J2EE> WEB-INF> classes下的fusioncharts_export.properties拷贝到WEB-INF/classes。
该jar包在JDK1.5下测试通过，还提供了JDK1.4的jar包。
2、配置web.xml
增加FCExporter servlet映射到应用配置web文件：
<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</url-pattern>
</servlet-mapping>
注：url-pattern的值按应用需要修改。
3、数据XML中增加属性：exportHandler='FCExporter'，导出处理程序指向到FCExporter，可根据应用需要修改。
4、保存服务器端的配置文件。
修改fusioncharts_export.properties：
SAVEPATH=./images，服务器上保存图片的目录，需写入权限
HTTP_URI=http://www.yourdomain.com:port/images/，访问HTTP路径
OVERWRITEFILE=true/false，是否可覆盖？
INTELLIGENTFILENAMING=true/false
FILESUFFIXFORMAT=TIMESTAMP
三、FusionCharts 显示图形JSP文件
<%@page contentType="text/html;charset=UTF-8"%>
<!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="./FusionCharts/FusionCharts.js"></SCRIPT>
<script language="text/javascript" src="./FusionCharts/FusionChartsExportComponent.js"></script>
</head>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<div style="margin: 10px 0; border: solid 2px #ccddff; height: 24px; vertical-align: middle;
line-height: 24px; padding-top: 4px;">
<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 myChart = new FusionCharts( "./FusionCharts/MSColumn3DLineDY.swf", "myChartId", "800", "600", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
function FC_Exported(objRtn){
if (objRtn.statusCode == "1"){
alert("The chart was successfully saved on server. The file can be accessed from " + objRtn.fileName);
}
else{
alert("The chart could not be saved on server. There was an error. Description : " + objRtn.statusMessage);
}
}
//保存chart
function saveChart(){
var chartObject = getChartFromId("myChartId");
//chartToSave.saveAsImage();
if( chartObject.hasRendered() ) chartObject.exportChart();
}
//打印chart
function printChart(){
var chartToPrint = getChartFromId("myChartId");
chartToPrint.print();
}
</script>
</body>
</html>
四、数据XML文件配置
<chart caption='Product Sales & Downloads'
showValues='0' PYAxisName='Sales' SYAxisName='Total Downloads' unescapeLinks='0'
exportHandler='FCExporter' exportFileName='MyFileName' exportCallback='FC_Exported'
exportEnabled='1' exportAtClient='0' exportAction='download'
>
。。。。
</chart>
五、保存图片效果截图
[img]http://dl.iteye.com/upload/attachment/541888/a5d35522-5bc1-3ee2-9a89-6d9d03131e9f.jpg[/img]
图1 右键弹出菜单驱动方式
[img]http://dl.iteye.com/upload/attachment/541890/49052dcf-d766-3890-9041-c1e1aca30805.jpg[/img]
图2 捕获数据处理过程
[img]http://dl.iteye.com/upload/attachment/541892/a03608c2-7c2b-38f3-8c76-040971fda678.jpg[/img]
图3 保存jpg图片
[img]http://dl.iteye.com/upload/attachment/541894/d63f7084-d977-359f-a6e1-71852b81549f.jpg[/img]
图4 Javascript驱动方式保存图片
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
