FusionChart3.1的基本应用

FusionChart3.1的基本应用


FusionChart在3.07版本已经支持导出功能了,最近做项目正好需要。用3.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">
只需要在chart里面加入:
      exportEnabled='1' exportHandler='/FC/FCExporter.jsp'
  --/FC/FCExporter.jsp是这个jsp文件所在的的位置。


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

XML/HTML代码
<script language="JavaScript" src="/charts31/JSClass/FusionCharts.js"></script>   
<script language="JavaScript" src="/charts31/JSClass/FusionChartsExportComponent.js"></script> 
 

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

XML/HTML代码
<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代码
<chart ...exportEnabled='1' exportAtClient='1' exportHandler='fcExporter_all' exportDialogMessage='正在导出,请稍候...' exportFileName='图表' exportFormats='PDF=导出PDF文件|PNG=导出PNG文件|JPG=导出JPG文件' ...>  


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

XML/HTML代码
<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代码
<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代码
<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的页面中也不能使用。

你可能感兴趣的:(html,xml,jsp,PHP,Flash)