学步园

FusionChart在3.07版本已经支持导出功能了，最近做项目正好需要。用3.1版本实现

介绍一种导出图片比较简单的方法：

Java代码  

1. <chart palette="4" exportEnabled='1' exportHandler='/FC/FCExporter.jsp' decimals="0" enableSmartLabels="1" enableRotation="0" bgColor="99CCFF,FFFFFF" bgAlpha="40,100" bgRatio="0,100" bgAngle="360" showBorder="1" startingAngle="70">
     
2. 只需要在chart里面加入：   
3.       exportEnabled='1' exportHandler='/FC/FCExporter.jsp'  
4.   --/FC/FCExporter.jsp是这个jsp文件所在的的位置。  

<chart palette="4" exportEnabled='1' exportHandler='/FC/FCExporter.jsp' decimals="0" enableSmartLabels="1" enableRotation="0" bgColor="99CCFF,FFFFFF" bgAlpha="40,100" bgRatio="0,100" bgAngle="360" showBorder="1" startingAngle="70">
只需要在chart里面加入：
      exportEnabled='1' exportHandler='/FC/FCExporter.jsp'
  --/FC/FCExporter.jsp是这个jsp文件所在的的位置。

其他方法：首先，在需要插入图表的页面包含进

XML/HTML代码

Java代码  

1. <script language="JavaScript" src="/charts31/JSClass/FusionCharts.js"></script>      
2. <script language="JavaScript" src="/charts31/JSClass/FusionChartsExportComponent.js"></script>   

<script language="JavaScript" src="/charts31/JSClass/FusionCharts.js"></script>   
<script language="JavaScript" src="/charts31/JSClass/FusionChartsExportComponent.js"></script> 

然后，在需要插入图表的位置

XML/HTML代码

Java代码  

1. <div id="chartdiv1" align="center"></div>      
2. <script type="text/javascript">      
3.    var myChart = new FusionCharts("/charts31/Column2D.swf", "myChartId1","90%","90%",0,1); 
     
4. //参数含意 需要图表的swf文件，图表ID，宽度，高度，debug模式，是否允许JS与图表通信    
     
5.    myChart.setDataURL("data.xml");    
6. //承载数据的xml文件，也可以是程序文件生成xml       
7. myChart.setTransparent(false);    
8. //设置flash与其他层的层次，false是flash在最下    
     
9.    myChart.render("chartdiv1");       
10. </script>      
11.  </td>     

<div id="chartdiv1" align="center"></div>   
<script type="text/javascript">   
   var myChart = new FusionCharts("/charts31/Column2D.swf", "myChartId1","90%","90%",0,1); 
//参数含意 需要图表的swf文件，图表ID，宽度，高度，debug模式，是否允许JS与图表通信    
   myChart.setDataURL("data.xml"); 
//承载数据的xml文件，也可以是程序文件生成xml    
myChart.setTransparent(false); 
//设置flash与其他层的层次，false是flash在最下    
   myChart.render("chartdiv1");    
</script>   
 </td>   

在数据文件data.xml中，需要加入如下定义

XML/HTML代码

Java代码  

1. <chart ...exportEnabled='1' exportAtClient='1' exportHandler='fcExporter_all' exportDialogMessage='正在导出，请稍候...' exportFileName='图表' exportFormats='PDF=导出PDF文件|PNG=导出PNG文件|JPG=导出JPG文件' ...>    

<chart ...exportEnabled='1' exportAtClient='1' exportHandler='fcExporter_all' exportDialogMessage='正在导出，请稍候...' exportFileName='图表' exportFormats='PDF=导出PDF文件|PNG=导出PNG文件|JPG=导出JPG文件' ...>  

下边是重头戏了，在页面文件中设定下载方式，项目中用到的有两种方式，一种是单独下载

XML/HTML代码

Java代码  

1. <div id="fcexpDiv" ></div>      
2. <script type="text/javascript">      
3.    var myExportComponent = new FusionChartsExportObject("fcExporter_all", "/charts31/FCExporter.swf");       
4. //这里的第一个参数必须和数据文件中exportHandler的值相同     
     
5.    myExportComponent.componentAttributes.btnFontSize = '12';       
6. myExportComponent.componentAttributes.btndisabledtitle = '等待导出';        
7.    myExportComponent.componentAttributes.btnsavetitle = '下载';       
8.    myExportComponent.Render("fcexpDiv");       
9.    </script>     

<div id="fcexpDiv" ></div>   
<script type="text/javascript">   
   var myExportComponent = new FusionChartsExportObject("fcExporter_all", "/charts31/FCExporter.swf");    
//这里的第一个参数必须和数据文件中exportHandler的值相同     
   myExportComponent.componentAttributes.btnFontSize = '12';    
myExportComponent.componentAttributes.btndisabledtitle = '等待导出';     
   myExportComponent.componentAttributes.btnsavetitle = '下载';    
   myExportComponent.Render("fcexpDiv");    
   </script>   

另一种方式是出现下载列表，并且可合并下载

XML/HTML代码

Java代码  

1. <div id="fcexpDiv" ></div>      
2. <script type="text/javascript">      
3.    var myExportComponent = new FusionChartsExportObject("fcExporter_all", "/swf/charts31/FCExporter.swf");       
4.           
5.    myExportComponent.componentAttributes.fullMode = '1';       
6.       
7.    myExportComponent.componentAttributes.saveMode = 'both';       
8.          
9.    myExportComponent.componentAttributes.showAllowedTypes = '1';       
10.           
11.    myExportComponent.componentAttributes.width = '400';       
12.    myExportComponent.componentAttributes.height = '150';       
13.          
14.    myExportComponent.componentAttributes.showMessage = '1';       
15.    myExportComponent.componentAttributes.message = '成功导出文件列表';       
16.       
17.    myExportComponent.componentAttributes.defaultExportFilename = '综合分析';       
18.    myExportComponent.componentAttributes.saveAllTitle = '合并类型';       
19.    myExportComponent.componentAttributes.btnSaveAllTitle = '合并下载';       
20.           
21.       
22.    myExportComponent.componentAttributes.btnFontSize = '12';       
23.    myExportComponent.componentAttributes.btnsavetitle = '下载';       
24.    myExportComponent.Render("fcexpDiv");       
25.    </script>     

<div id="fcexpDiv" ></div>   
<script type="text/javascript">   
   var myExportComponent = new FusionChartsExportObject("fcExporter_all", "/swf/charts31/FCExporter.swf");    
       
   myExportComponent.componentAttributes.fullMode = '1';    
   
   myExportComponent.componentAttributes.saveMode = 'both';    
      
   myExportComponent.componentAttributes.showAllowedTypes = '1';    
       
   myExportComponent.componentAttributes.width = '400';    
   myExportComponent.componentAttributes.height = '150';    
      
   myExportComponent.componentAttributes.showMessage = '1';    
   myExportComponent.componentAttributes.message = '成功导出文件列表';    
   
   myExportComponent.componentAttributes.defaultExportFilename = '综合分析';    
   myExportComponent.componentAttributes.saveAllTitle = '合并类型';    
   myExportComponent.componentAttributes.btnSaveAllTitle = '合并下载';    
       
   
   myExportComponent.componentAttributes.btnFontSize = '12';    
   myExportComponent.componentAttributes.btnsavetitle = '下载';    
   myExportComponent.Render("fcexpDiv");    
   </script>   

至此，基本上图表导出功能就实现了。

在实际开发的时候还出现另一种情况，就是某些页面不支持解析js，这种情况当然非常少见，我也只是在用extjs的tabs的时候遇到过，这种时候，我们怎么才能用图表呢，答案是直接写出上文js生成出来的html代码，并且由于需要多浏览器支持，可以直接用

XML/HTML代码

Java代码  

1. <embed type="application/x-shockwave-flash" src="/charts31/StackedArea2D.swf" width="90%25" height="90%25"   id="myChartId1" name="myChartId1" quality="high" allowScriptAccess="always" WMode="Opaque" flashvars="debugMode=0&chartWidth=90%25&chartHeight=90%25&DOMId=myChartId1®isterWithJS=1&scaleMode=noScale&lang=EN&dataURL=data.xml"/>     

<embed type="application/x-shockwave-flash" src="/charts31/StackedArea2D.swf" width="90%25" height="90%25"   id="myChartId1" name="myChartId1" quality="high" allowScriptAccess="always" WMode="Opaque" flashvars="debugMode=0&chartWidth=90%25&chartHeight=90%25&DOMId=myChartId1®isterWithJS=1&scaleMode=noScale&lang=EN&dataURL=data.xml"/>   

一行代码即可实现

有人可能要说FC还支持PHP的写法还支持APS的写法等等，我明确告诉你，在他用PHP的写法做函数调用后，其实也是调到了上边的JS，与JS的写法基本是一样的，在完全不支持JS的页面中也不能使用。