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

标签：style   blog   java   color   width   2014   

最近一个项目  一个页面有多个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");
			}

fusioncharts批量导出图片之后自动提交表单,布布扣,bubuko.com

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

标签：style   blog   java   color   width   2014   

原文地址：http://blog.csdn.net/myfmyfmyfmyf/article/details/36171795