IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

fusioncharts批量导出图片之后自动提交表单

发布日期:2014-07-01 19:26:45
  • 收藏本文    我要投稿
  • 最近一个项目 一个页面有多个fusioncharts,需要将他们一次性导出之后再利用图片做一下操作,制作一个可以客户下载的质检简报。

    对客户效果来说,我只需要点击一个按钮就能生成简报并且下载,对开发人员来说就需要,先将图片导出(当然不能挨个导出,要同时执行导出,因为fusioncharts导出太慢了),要确认全部导出了才能提交表单,要不然提交表单之后,图片没有生成出来必然产生异常。下面我们来看一下实现

    首先我给每一个fusionchartschart指定一个有规律的id,作用有两个: 一个是导出图片的时候知道有多少个;另一个项目需要图片的位置都是固定的,我要知道它是对应哪一个试题的fusioncharts。

    <s:iterator id="qc_question" value="#request.report.qc_QA_table" status="i">
    <tr>

    .............

    <div id='exportSampleDiv<s:property value="#i.index+1"/>' style="width:100%;height:100%" align='center'></div>

    <script type='text/javascript'>

    var data="<s:property value='#qc_question.fushionChartXml' escape='false'/>";

    var chart_exportSample = new FusionCharts({"renderAt":"exportSampleDiv<s:property value='#i.index+1'/>","dataFormat":"xml","debugMode":"0","width":"400","swfUrl":"../../framework/fusioncharts/Column3D.swf","id":"exportSample<s:property value='#i.index+1'/>","dataSource":data,"height":"200","registerWithJS":"1"});

    chart_exportSample.render();

    </script>

    ..........

    </tr>

    </s:iterator>

    --------------------fusioncharts的xml定义,这里重新指定了fusioncharts的回调函数exportCallback='FC_Exported_two',就是说每一个fusioncharts导出之后都会执行FC_Exported_two这个js方法

    <chart  exportEnabled='1' bgColor='#D2BB91'  baseFontSize='15'  yAxisMaxValue='"+max+"'  bgAlpha='86' exportCallback='FC_Exported_two'  showBorder='0'  exportAction='Save' exportAtClient='0' exportHandler='FCExporter'  showExportDialog='1' caption='' xAxisName='' yAxisName='选 项 数 量' showValues='0' formatNumberScale='0' showBorder='1' >"


    下面是关键的js

    			//回调函数
    			function FC_Exported_two( statusObj )
    			{
    				/*var m="";
    				for (var a in statusObj) {
    				  m+=a+":"+statusObj[a];
    				}
    				alert(m);*/
    				if ( statusObj.statusCode == "1" ){
    					//导出成功
    					var fileName=statusObj.fileName;
    					var imageName=fileName.substring(fileName.lastIndexOf("/")+1,fileName.length);
    					imageName=$("#imgid").val()+";"+statusObj.DOMId.substring(12,statusObj.DOMId.length)+"&"+imageName;
    					$("#imgid").val(imageName);
    					img++;
    				}else{
    					alert("导出失败");
    				}
    			}
    
    			//用来确定图片是否导出完毕
    			var img=0;
    			var t;
    
    			
    			//导出word
    			function exportWord(){
    				//在这个位置让页面变成灰色
    				//$("#_DialogBGDiv").css("display","block");
    				setPageColor();
    				var imgSrcNum = $('#imgSrcNum').val();
    				for (var i=1; i <= imgSrcNum; i++) {
    					var chartObject = getChartFromId('exportSample'+i);
    					  if( chartObject.hasRendered() ){
    						   chartObject.exportChart(); 
    					  }
    				}
    				var tmp="checkImgNum('"+imgSrcNum+"')";
    				t=setInterval(tmp,1000);  
    			}
    
    
    			
    			//等待   确认图片导出完毕
    			function checkImgNum(imgSrcNum){
    				//如果图片全部导出之后停止
    				if(img==imgSrcNum){
    					//在这个位置让页面取消灰色
    					$("#DialogDiv").css("display","none");
    					$("#pageBody").css("overflow","auto");
    					
    					clearInterval(t);
    					$("#myform").submit();
    				}
    			}
    
    			//覆盖页面
    			function setPageColor(){
    				var height=document.body.scrollHeight;
    				var width=document.body.scrollWidth;
    				$("#DialogDiv").css("display","block");
    				$("#pageBody").css("overflow","hidden");
    			}


Tag标签:表单  图片  
  • 专题推荐