首页 > 代码库 > 图表转换

图表转换

Js

  1 // 图表转换方法:用于切换图与表。  2     var init = false;  3     function toggle(){  4         if ($("#container").is(":hidden")) {  5             $("#container").show();  6             $("#refshbtn").show();  7             $("#prm_div").show();  8             $("#report_ui").hide();  9             $("#tb").hide(); 10             updateChartData(); 11             f(); 12         }else { 13             $("#container").hide(); 14             $("#refshbtn").hide(); 15             $("#prm_div").hide(); 16             $("#report_ui").show(); 17             $("#tb").show(); 18             if (!init) { 19                 $(‘#tt‘).datagrid({view:myview,rownumbers:true, 20                     singleSelect:true, 21                     toolbar: ‘#tb‘, 22                     onClickRow: onClickRow}); 23                 init = true; 24             } 25             $("#tt").datagrid(‘resize‘, { 26                 width: $(document.body)[0].clientWidth 27             }); 28             f(); 29         } 30     } 31    // 更新图表数据方法:  把编辑表之后的数据更新到图上。 32     function updateChartData() { 33         var series = $(‘#${divId}‘).highcharts().series; 34         var data = http://www.mamicode.com/$("#tt").datagrid("getData").rows; 35         <s:iterator var="item" value="http://www.mamicode.com/#request.chartsVO.series" status="status"> 36             var id = ‘${item.id}‘; 37             var dataAry = new Array(); 38             for (var j = 0; j < data.length; j++) { 39                 var childAry = new Array(); 40                 <s:if test="%{#request.chartsVO.xaxisVO.xaxisType == ‘datetime‘}"> 41                 if(data[j][id]==""){ 42                     childAry.push(parseInt(data[j].RQ), null); 43                 }else{ 44                     childAry.push(parseInt(data[j].RQ), parseFloat(data[j][id])); 45                 } 46                      47                 </s:if> 48                 <s:if test="%{#request.chartsVO.xaxisVO.xaxisType == ‘category‘}"> 49                 if(data[j][id]==""){ 50                     childAry.push(data[j].RQ,null); 51                 }else{ 52                     childAry.push(data[j].RQ, parseFloat(data[j][id])); 53                 } 54                 </s:if> 55                 dataAry.push(childAry); 56             } 57             series[${status.index}].setData(dataAry, true); 58         </s:iterator> 59         $(‘#${divId}‘).highcharts().reflow(); 60     } 61     //指标参数选择,刷新曲线图的方法。 62     function checkDateToBack(){ 63          64             if($(".btn1").filter(":checked").length==0){ 65                 alert("指标参数不能为空,请勾选!"); 66             }else{ 67                 $("#cx").attr("action","${pageContext.request.contextPath}/iwell.disposition.monitor_1.0/show_charts.action?jh=${chartsVO.jh }&wellType=${chartsVO.wellType }&queryCategory=${chartsVO.queryCategory }&begRq=${begRq}&endRq=${endRq}"); 68                 $("#cx").submit(); 69             } 70     } 71     //结束编辑。 72     var editIndex = undefined; 73     function endEditing(){ 74         if (editIndex == undefined){return true} 75         if ($(‘#tt‘).datagrid(‘validateRow‘, editIndex)){ 76              77             $(‘#tt‘).datagrid(‘endEdit‘, editIndex); 78             editIndex = undefined; 79             return true; 80         } else { 81             return false; 82         } 83     } 84     //编辑方法,点击一行对表数据进行编辑。 85     function onClickRow(index){ 86         if (editIndex != index){ 87             if (endEditing()){ 88                 $(‘#tt‘).datagrid(‘selectRow‘, index) 89                         .datagrid(‘beginEdit‘, index); 90                 editIndex = index; 91             } else { 92                 $(‘#tt‘).datagrid(‘selectRow‘, editIndex); 93             } 94         } 95     } 96     //保存.对表编辑后的数据保存 97     function accept(){ 98         if (endEditing()){ 99             $(‘#tt‘).datagrid(‘acceptChanges‘);100         }101     }102     //撤销103     function reject(){104         $(‘#tt‘).datagrid(‘rejectChanges‘);105         editIndex = undefined;106     }107     function f() {108         parent.window.setWinHeight(parent.window.document.getElementById("frame_${queryCategory}"));109     }110     var win_height, interval, cnt = 0;111     function dif() {112         var cur_height = document.body.offsetHeight;113         if (cur_height != win_height || cnt > 10) {114             clearInterval(interval);115             f();116         }117         cnt++;118     }119     var myview = $.extend({},$.fn.datagrid.defaults.view,{120         onBeforeRender:function(target){121             win_height = document.body.offsetHeight;122             interval = setInterval("dif()",1000);123         }124     });125   </script>

 

<!--图表转换按钮、 指标参数栏、 绘制曲线图的容器 -->	<div align="left">	<span><a href="javascript:checkDateToBack();void(0);" id="refshbtn" class="fmbutton">刷新曲线图</a></span>	<span><a href="javascript:void(0);" id="ss" class="fmbutton" onclick="toggle()">图表转换</a></span>	</div>	<div id="prm_div" style="font-size: 12px;" align="left">		<form id="cx"  method="post">			<s:iterator var="item" value="http://www.mamicode.com/#request.optionPrm" status="status">				<span><input class="btn1" type="checkbox" name="checkPrm" onclick="checkDateToBack()" style="margin: 3px 1px 0px 3px;" value="http://www.mamicode.com/${item.id }" ${item.checked } />${item.text }</span>			</s:iterator>		</form>	</div>	<div id="container" style="min-width: 300px; height: ${divHeight}px; margin: 0 auto"></div>	<!-- 表 -->	<div id="tb" style="height:auto; display:none;">	 <a href="javascript:void(0);" class="easyui-linkbutton"  data-options="iconCls:‘icon-save‘,plain:true" onclick="accept()">确定</a>	 <a href="javascript:void(0);" class="easyui-linkbutton"  data-options="iconCls:‘icon-undo‘,plain:true" onclick="reject()">撤销</a>	 <s:if test=‘#request.queryCategory=="R"‘>	 <a href="javascript:void(0);" class="easyui-linkbutton"  data-options="iconCls:‘icon-redo‘,plain:true" onclick="exportExcel(‘${pageContext.request.contextPath}‘,‘tt‘,‘${jh}井的日度曲线.xls‘)">导出Excel</a>	 </s:if>	 <s:else>	 <a href="javascript:void(0);" class="easyui-linkbutton"  data-options="iconCls:‘icon-redo‘,plain:true" onclick="exportExcel(‘${pageContext.request.contextPath}‘,‘tt‘,‘${jh}井的月度曲线.xls‘)">导出Excel</a>	 </s:else>	</div>	<div id="report_ui"  style="width:100%; height:auto; margin: 0 auto; display:none;">	     <table id="tt" style="width:100%;height:auto;">	     </table>	</div>

 

图表转换