注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

程序员驿站

淘宝店:http://shop106888457.taobao.com

 
 
 

日志

 
 

FusionChart3.1的基本应用  

2014-08-19 20:09:12|  分类: FusionCharts |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
FusionChart在3.07版本已经支持导出功能了,最近做项目正好需要。用3.1版本实现

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

Java代码 复制代码 收藏代码FusionChart3.1的基本应用 - dingtao-wgs - 程序员驿站
  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代码 复制代码 收藏代码FusionChart3.1的基本应用 - dingtao-wgs - 程序员驿站
  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代码 复制代码 收藏代码FusionChart3.1的基本应用 - dingtao-wgs - 程序员驿站
  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代码 复制代码 收藏代码FusionChart3.1的基本应用 - dingtao-wgs - 程序员驿站
  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代码 复制代码 收藏代码FusionChart3.1的基本应用 - dingtao-wgs - 程序员驿站
  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代码 复制代码 收藏代码FusionChart3.1的基本应用 - dingtao-wgs - 程序员驿站
  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代码 复制代码 收藏代码FusionChart3.1的基本应用 - dingtao-wgs - 程序员驿站
  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的页面中也不能使用。

  评论这张
 
阅读(426)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017