首页 > 代码库 > fusioncharts批量导出图片之后自动提交表单

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

 

最近一个项目  一个页面有多个fusioncharts,需要将他们一次性导出之后再利用图片做一下操作,制作一个可以客户下载的质检简报。

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

 

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

<s:iterator id="qc_question" value=http://www.mamicode.com/"#request.report.qc_QA_table" status="i">
       <tr>

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

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

           <script type=‘text/javascript‘>

               var data=http://www.mamicode.com/"";

               var chart_exportSample = new FusionCharts({"renderAt":"exportSampleDiv<s:property  value=http://www.mamicode.com/‘#i.index+1‘/>","dataFormat":"xml","debugMode":"0","width":"400","swfUrl":"../../framework/fusioncharts/Column3D.swf","id":"exportSample<s:property value=http://www.mamicode.com/‘#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=http://www.mamicode.com/'"+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");			}