hightCharts 跳转页面接改为弹窗图形设置效果！

1.hightcharts 图显示在企业web框架中，使用页面跳转方式显示经常出现，为了提高显示效果，改用先弹窗再显示图形.   

	   		$("#input_selsdate").datepicker({
	        		dateFormat: 'yy-mm-dd',
	    	});
	    		$("#input_seledate").datepicker({
	        		dateFormat: 'yy-mm-dd',
	    	});
	    	
    		$('button').click(function(){
        		var buttonname = $(this).val();
        		var y='';
        		var dw='';
        		var title1='';
        		var title2='';
        		if(buttonname=='LLIANG'){
        			y='流量增量(m³)';
        			title1='累计流量--增量曲线';
        			title2='每日流量增量';
        			dw='m³';
        		}else{
        			y='热量增量(KWH)';
        			title1='累计热量--增量曲线';
        			title2='每日热量增量';
        			dw='KWH';
        		}
    <%--   $.post("${contextPath}/monitorData/zlcharts/getzlData?zl="+buttonname+"&areaguid="+<%=(String)request.getParameter("areaguid")%>"&customerid="+$('#clientno').val()+"&sdate="+$('#input_selsdate').val()+"&edate="+$('#input_seledate').val(), function (data) { --%>
  	  	 $.post("${contextPath}/dataAnalysis/energyConsumingStatisContr/getzlData?zl="+buttonname+"&areaguid=<%=(String)request.getParameter("areaguid")%>&customerid="+$('#clientno').val()+"&sdate="+$('#input_selsdate').val()+"&edate="+$('#input_seledate').val(), function (data) {            
        		var chartdata = [];
        		var xchart=[];
        		var jsonarray = eval("("+data+")");
        		if(buttonname=='LLIANG'){
        			for(var i=0;i<jsonarray.length;i++){
        				chartdata[i] = parseFloat(jsonarray[i].LLIANG);
        				xchart[i] = jsonarray[i].DDATE;
        			}
        		}else{
        			for(var i=0;i<jsonarray.length;i++){
        				chartdata[i] = parseFloat(jsonarray[i].RELIANG);
        				xchart[i] =jsonarray[i].DDATE;
        			}
        		}
        		$('#zlcharts').highcharts({
        		        title: {
        		            text: title1,
        		            x: -20 //center
        		        },
        		        credits: {
        		            enabled:false
        		        },
        		        subtitle: {
        		            text: title2,
        		            x: -20
        		        },
        		        xAxis: {
        		        	tickInterval: 5,
        		            categories:xchart,
        		            labels:{
        		            	 rotation: -45   //45度倾斜
        	                 }
        		        },
        		        yAxis: {
        		            title: {
        		                text: y
        		            },
        		            plotLines: [{
        		                value: 0,
        		                width: 1,
        		                color: '#808080'
        		            }]
        		        },
        		        tooltip: {
        		            valueSuffix: dw
        		        },
        		        legend: {
        		            layout: 'vertical',
        		            align: 'right',
        		            verticalAlign: 'middle',
        		            borderWidth: 0
        		        },
        		        series: [{
        		            name: y,
        		            data: chartdata
        		        }]
        		    });
        		 }); /*  }); */
    		});

2.java代码：

Controller层：
	@RequestMapping("/getzlData")
	public void getzlData(HttpServletRequest request,HttpServletResponse response) throws IOException{
		printRequestParam();
		String zl=request.getParameter("zl");
		String areaguid=request.getParameter("areaguid");
		String doorno=request.getParameter("doorno");
		String sdate=request.getParameter("sdate");
		String edate=request.getParameter("edate");
		
		String where = " where 1=1 ";
		if(StringUtils.isNotBlank(getParm("customerid"))){
			where += " and customerid = " + getParm("customerid");
		}else{
			List<Map> tdoor_meter=baseDao.listSqlAndChangeToMap("select * from tdoor_meter where areaguid="+areaguid+" and doorno="+doorno, null);
			where += " and meterid='"+tdoor_meter.get(0).get("METERNO")+"'";
			
		}
		String sql="select to_char(ddate,'yyyy-MM-dd') as ddate,round("+zl+",2) as "+zl+" from tmeter_day "
				        + where + " and areaguid="+areaguid
						+ " and ddate between to_date('"+sdate+" 00:00:00','yyyy-MM-dd HH24:mi:ss') and"
						+ " to_date('"+edate+" 23:59:59','yyyy-MM-dd HH24:mi:ss') "
						+ " order by ddate asc";
		List<Map> list=baseDao.listSqlAndChangeToMap(sql, null);
		//使用Google的Json工具  
		Gson gson = new Gson();  
		//将JSON串返回  
		PrintWriter out = response.getWriter();  
		out.print(gson.toJson(list));  
		out.flush();  
		out.close();  
  }

3.显示效果如图：

4.弹窗显示效果：

5.详细部分代码就不分享了，JSP部分相对简单了:

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Calendar"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!-- 5 link -->
<link rel="stylesheet"
	href="${contextPath}/static/assets/css/bootstrap.css" />
<link rel="stylesheet"
	href="${contextPath}/static/pageclock/compiled/flipclock_statistic.css" />
<link rel="stylesheet" href="${contextPath}/static/litdatepicker.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="${contextPath}/static/Highcharts-4.2.5/highslide.css" />


<link rel="stylesheet"
	href="${contextPath}/static/assets/css/jquery-ui.css" />
<link rel="stylesheet"
	href="${contextPath}/static/assets/css/ui.jqgrid.css" />
<link rel="stylesheet"
	href="${contextPath}/static/assets/css/datepicker.css" />
	
 <style>
        html,body{text-align:center;margin:0px auto;}
 </style>	
	
<body>	
<%
			Calendar c = Calendar.getInstance();
			String today = new SimpleDateFormat("yyyy-MM-dd").format(c.getTime());
			c.add(Calendar.DATE, -7);
			String weekAgo = new SimpleDateFormat("yyyy-MM-dd").format(c.getTime());
		%>
<div class="row">
	<div class="col-xs-12">
		
		<div id="sel_dialog" style="display: none;">
			<p> 选择小区：<select id="areainfo" style="width: 50%;"></select></p>
			<p>
				开始日期：<input id="input_sel_date" type="text" value="<%=weekAgo%>"
					readonly="readonly">
			</p>
			<p>
				结束日期：<input id="input_sel_date2" type="text" value="<%=today%>"
					readonly="readonly">
			</p>
		</div>
		<div id="da-search"></div>
		<table id="grid-table"></table>
		<div id="grid-pager"></div>
	</div>
</div>





<div id="myModal" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
	<div class="modal-dialog"   style="width:1100px;">
		<form id="authorityForm" class="form-inline">
			<div class="modal-content">
				<div class="modal-header no-padding">
					<div class="table-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							<span class="white">×</span>
						</button>
						用户增量曲线图
					</div>
				</div>
				<div class="modal-body" style="max-height: 450px;overflow-y: scroll;">
					<div id="modal-tip" class="red clearfix"></div>
					<input id="buildnovalue"  type="hidden" />
					<input id="meternovalue" type="hidden" />
					<input id="type" type="hidden" />
					<div class="widget-box widget-color-blue2">
						<div class="widget-body" >
							<div class="widget-main padding-8" >
							            
							            
								 <div class="form-group">

								   <label>起始时间：<span></span></label>
									<input style="height: 28px;width: 100px; padding-top: 2px; padding-bottom: 2px;"  id="input_selsdate" type="text"  value="<%=weekAgo%>" readonly="readonly"> 
									<label>结束时间：</label>
									<input style="height: 28px;width: 100px; padding-top: 2px; padding-bottom: 2px;"  id="input_seledate" type="text"  value="<%=today %>" readonly="readonly"> 
									<label>用户编号：</label>
									<input style="height: 28px;width: 130px; padding-top: 2px; padding-bottom: 2px;"  id="clientno" type="text"  value="<%=(String)request.getParameter("customerid") %>" readonly="readonly" >
	                         	 
	                         	 </div>
	                         	    
	                           <div class="form-group">
		                         <button type="button" class="btn btn-success" id="LLIANG" value="LLIANG">流量增量</button>
								 <button type="button" class="btn btn-success" id="RELIANG" value="RELIANG">热量增量</button>
								 <button type="button" onClick = "javascript:history.go();" class="btn btn-success">返  回</button>
	                           </div>
	                          
	                            <div class="row"> <div class="col-xs-12">
	                            <div id="List_tableview" style="width:1000px"></div>
	                            <div id="zlcharts"></div><!-- 图表 -->
	                           </div>
	                           </div>  
							</div>
						</div>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</form>
	</div><!-- /.modal-dialog -->
</div>

</body>

</html>