流量统计app详情界面中app趋势改为实时跟历史界面，实时可查当时五分钟前的实时数据，粒度1分钟，历史可按时间，地域查询历史信息，默认为跳转前app详情界面时间。

2019-01-10 16:34:04 +08:00
parent c76de86e3b
commit 74ca3bdbde
4 changed files with 287 additions and 95 deletions
--- a/src/main/resources/messages/message_en.properties
+++ b/src/main/resources/messages/message_en.properties
@@ -1464,4 +1464,6 @@ protocol_statistics=Protocol Statistics
 app_statistics=App Statistics
 service_statistics=Service Statistics
 website_statistics=Website Statistics
-not_exist=not exist
+not_exist=not exist
+real_time=Real Time
+history=History
--- a/src/main/resources/messages/message_ru.properties
+++ b/src/main/resources/messages/message_ru.properties
@@ -719,7 +719,7 @@ app_features_config=\u041f\u0440\u0438\u0437\u043d\u0430\u043a\u0438 \u043f\u044
 cfg_type=\u0422\u0438\u043f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438
 encrypted_tunnel_behavior=\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f
 behaviour_type=\u0422\u0438\u043f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f
-basic_protocol=L7 \u041F\u0440\u043E\u0442\u043E\u043A\u043E\u043B
+basic_protocol=L7 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b
 ip_Reuse_pool_config=\u041f\u0443\u043b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f IP-\u0430\u0434\u0440\u0435\u0441\u043e\u0432
 dns_res_strategy=\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 DNS
 policy_number=\u2116 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438
@@ -1132,7 +1132,7 @@ report_total=\u0412\u0441\u0435\u0433\u043e
 message_type=\u0422\u0438\u043f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f
 as=\u041a\u0410\u041a
 route=\u041c\u0430\u0440\u0448\u0440\u0443\u0442
-transport_layer_protocol=\u041F\u0440\u043E\u0442\u043E\u043A\u043E\u043B \u0422\u0440\u0430\u043D\u0441\u043F\u043E\u0440\u0442\u043D\u043E\u0433\u043E \u0423\u0440\u043E\u0432\u043D\u044F
+transport_layer_protocol=\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b \u0422\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u043d\u043e\u0433\u043e \u0423\u0440\u043e\u0432\u043d\u044f
 av_voip_monit=\u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 VoIP
 av_voip_reject=VoIP \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435
 label_proto_source=\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430
@@ -1461,11 +1461,13 @@ country_code=Country Code
 asn_name=ASN Name
 details=Details
 NTC_ASN_NUMBER=ASN
-application_layer_protocol=L7 \u041F\u0440\u043E\u0442\u043E\u043A\u043E\u043B
-traffic_statistics=\u041F\u0440\u043E\u043F\u0443\u0441\u043A\u043D\u0430\u044F \u0421\u043F\u043E\u0441\u043E\u0431\u043D\u043E\u0441\u0442\u044C \u0422\u0440\u0430\u0444\u0438\u043A\u0430
-active_ip_statistics= \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u0410\u043A\u0442\u0438\u0432\u043D\u044B\u0445 IP-\u0430\u0434\u0440\u0435\u0441\u043E\u0432
-protocol_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u041F\u0440\u043E\u0442\u043E\u043A\u043E\u043B\u043E\u0432
-app_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u041F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0439
-service_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u0421\u0435\u0440\u0432\u0438\u0441\u043E\u0432
-website_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u0412\u0435\u0431-\u0441\u0430\u0439\u0442\u043E\u0432
-not_exist=not exist
+application_layer_protocol=L7 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b
+traffic_statistics=\u041f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u0430\u044f \u0421\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0422\u0440\u0430\u0444\u0438\u043a\u0430
+active_ip_statistics= \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0445 IP-\u0430\u0434\u0440\u0435\u0441\u043e\u0432
+protocol_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u043e\u0432
+app_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439
+service_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0421\u0435\u0440\u0432\u0438\u0441\u043e\u0432
+website_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0412\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432
+not_exist=not exist
+real_time=Real Time
+history=History
--- a/src/main/resources/messages/message_zh_CN.properties
+++ b/src/main/resources/messages/message_zh_CN.properties
@@ -717,7 +717,7 @@ app_features_config=APP\u7279\u5f81
 cfg_type=\u914d\u7f6e\u7c7b\u578b
 encrypted_tunnel_behavior=\u52a0\u5bc6\u96a7\u9053\u884c\u4e3a
 behaviour_type=\u884c\u4e3a\u7c7b\u578b
-basic_protocol=L7\u534F\u8BAE
+basic_protocol=L7\u534f\u8bae
 ip_Reuse_pool_config=IP \u590d\u7528\u5730\u5740\u6c60
 dns_res_strategy=DNS\u54cd\u5e94\u7b56\u7565
 policy_number=\u7b56\u7565\u53f7
@@ -1458,10 +1458,12 @@ asn_name=ASN\u7ec4\u7ec7\u540d
 details=\u8be6\u60c5
 NTC_ASN_NUMBER=ASN
 application_layer_protocol=\u5e94\u7528\u5c42\u534f\u8bae
-traffic_statistics=\u6D41\u91CF\u541E\u5410\u91CF
-active_ip_statistics=\u6D3B\u8DC3IP\u7EDF\u8BA1
-protocol_statistics=\u534F\u8BAE\u7EDF\u8BA1
-app_statistics=App\u7EDF\u8BA1
-service_statistics=\u670D\u52A1\u7EDF\u8BA1
-website_statistics=\u7F51\u7AD9\u7EDF\u8BA1
-not_exist=\u4E0D\u5B58\u5728
+traffic_statistics=\u6d41\u91cf\u541e\u5410\u91cf
+active_ip_statistics=\u6d3b\u8dc3IP\u7edf\u8ba1
+protocol_statistics=\u534f\u8bae\u7edf\u8ba1
+app_statistics=App\u7edf\u8ba1
+service_statistics=\u670d\u52a1\u7edf\u8ba1
+website_statistics=\u7f51\u7ad9\u7edf\u8ba1
+not_exist=\u4e0d\u5b58\u5728
+real_time=\u5b9e\u65f6
+history=\u5386\u53f2
--- a/src/main/webapp/WEB-INF/views/dashboard/trafficAppTrendList.jsp
+++ b/src/main/webapp/WEB-INF/views/dashboard/trafficAppTrendList.jsp
@@ -29,11 +29,16 @@
 			<spring:message code="${appName}"></spring:message>
 		</h3>
 		<h5 class="page-header"></h5>
+		<ul class="nav nav-tabs">
+				<li class="changeData active" value="1"><a href="javascript:void(0);"><spring:message code="real_time"/></a></li>
+				<li class="changeData" value="2"><a href="javascript:void(0);"><spring:message code="history"/></a></li>
+		</ul>
+		<br>
 		<div class="row">
 			<form:form id="searchForm" method="get" class="form-search">
 				<!-- 搜索内容与操作按钮栏 -->
 				<div class="col-md-12">
-					<div class="pull-left">
+					<div class="pull-left chart-history">
 						<div class="input-group">
 							<div class="input-group-btn">
 								<span class="selectpicker form-control"><spring:message
@@ -43,7 +48,7 @@
 										value="" onclick="WdatePicker({onpicked:function(){this.onchange()},dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{\'new Date()\'}'});" onchange="setStartTime('#beginDate','#endDate',7,'d','yyyy-MM-dd hh:mm:ss',false)"/>
 					</div>
 					</div>
-					<div class="pull-left">
+					<div class="pull-left chart-history">
 						<div class="input-group">
 							<div class="input-group-btn">
 								<span class="selectpicker form-control"><spring:message
@@ -72,17 +77,17 @@
 							<i class="fa fa-search"></i>
 							<spring:message code="search" />
 						</button>
-						<button type="button" class="btn btn-default" id="resetBtn">
+						<%-- <button type="button" class="btn btn-default" id="resetBtn">
 							<i class="fa fa-refresh"></i>
 							<spring:message code="reset" />
-						</button>
+						</button> --%>
 					</div>
 				</div>
 				<!-- 搜索内容与操作按钮栏 -->
 			</form:form>
 		</div>
-		<div class="row">
-			<div id="chart" style="width: 97%; height: 450px; margin-top: 20px"></div>
+		<div class="row chart-realTime">
+			<div id="chart-realTime" style="width: 97%; height: 430px; margin-top: 20px"></div>
 			<input id="total" type="hidden" /> 
 			<input id="sipData" type="hidden" /> 
 			<input id="dipData" type="hidden" /> 
@@ -90,6 +95,9 @@
 			<input id="appType" name="appType" type="hidden" value="${appType}" /> 
 			<input id="beginDateh" type="hidden" value="${beginDate}" /> 
 			<input id="endDateh" type="hidden" value="${endDate}" />
+		</div>
+		<div class="row chart-history hidden">
+			<div id="chart-history" style="width: 97%; height: 430px; margin-top: 20px"></div>
 		</div>
 			<ul class="nav nav-tabs">
 				<li class="searchQuota active" value="1" onclick="changeOrderby(1)"><a href="javascript:void(0);"><spring:message code="link_num"/></a></li>
@@ -100,7 +108,7 @@
 			    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>  <spring:message code="export"/>
 			        <span class="caret"></span>
 			    </button>
-				    <ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
+				    <ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -12px;">
 				     <li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
 					 <li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv &nbsp;&nbsp;&nbsp;</a><li>
 				    </ul>
@@ -150,6 +158,7 @@
 			var entranceId=$("#entranceId").val();
 			var searchQuota=$(".searchQuota[class~='active']").val();
 			appTransAjax(starth,endh,appType,entranceId);
+			showRealTimeTransChart(appType,entranceId);// 实时折线
 			appTop100List(starth,endh,appType,entranceId,searchQuota);
 			//筛选功能初始化
 			$("#resetBtn").on("click",function() {
@@ -165,6 +174,19 @@
 				$(".searchQuota").removeClass("active");
 				$(this).addClass("active");
 			})
+			$(".chart-realTime").removeClass("hidden");
+			$(".chart-history").addClass("hidden");
+			$(".changeData").on("click",function(){
+				$(".changeData").removeClass("active");
+				$(this).addClass("active");
+				if($(this).val()==1){
+					$(".chart-realTime").removeClass("hidden");
+					$(".chart-history").addClass("hidden");
+				}else{
+					$(".chart-realTime").addClass("hidden");
+					$(".chart-history").removeClass("hidden");
+				}
+			})
 			$('.pageView').hide();
 		});
 		// 改变排序字段
@@ -183,6 +205,7 @@
 				var entranceId=$("#entranceId").val();
 				var searchQuota=$(".searchQuota[class~='active']").val();
 				appTransAjax(start,end,appType,entranceId);// 折线
+				showRealTimeTransChart(appType,entranceId);// 折线
 				appTop100List(start,end,appType,entranceId,searchQuota);// 列表
 			}
 		}
@@ -278,7 +301,6 @@
 		// app曲线图
 		function appTransAjax(beginDate, endDate,appType,entranceId) {
 			loading();
-			
 			$.ajax({	url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+beginDate+"&endDate="+endDate+"&entranceId="+entranceId,
 						type : "get",
 						dataType : "json",
@@ -303,32 +325,11 @@
 								$(dipResult).each(function(i,d){
 									dipData.push(d[1])
 									})
-									/* series.push({
-											name: "server",
-											data: sipResult,
-// 											lineColor:'#a9d4cf',
-											lineWidth:2,
-											marker: {
-									            enabled: false
-									        }
-										},{
-											name: "client",
-											data: dipResult,
-// 											lineColor:'#eecf8d',
-											lineWidth:2,
-											marker: {
-									            enabled: false
-									     }
-									}); */
+
 									}else{
 										total.push(0,0);
-										/* series.push({
-											name: " ",
-											data: []
-										}); */
-										
 									}
-							showActionTransChart(sipResult,dipResult);
+							showActionHistoryChart(sipResult,dipResult);
 							$("#total").val(JSON.stringify(total));
 							$("#sipData").val(JSON.stringify(sipData));
 							$("#dipData").val(JSON.stringify(dipData));
@@ -458,20 +459,46 @@
 		        $(".pageNum").text(Math.ceil(totalData/10));
 			}
 		}
-		function activeLastPointToolip(chart) {
-			var points = chart.series[0].points;
-			chart.tooltip.refresh(points[points.length -1]);
+		function realTimeTrendAjax(beginDate, endDate,appType,entranceId){
+			var result={};
+			$.ajax({
+				url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+beginDate+"&endDate="+endDate+"&entranceId="+entranceId,
+				type : "get",
+				dataType : "json",
+				async : false,
+				success : function(rs) {
+					result=rs;
+					closeTip();
+				},
+				error : function(data, textStatus, errorThrown) {
+					closeTip();
+				},
+				complete : function(XMLHttpRequest, status) {//超时设置
+					closeTip();
+				}
+			});
+			return result;
 		}
 		var timer=null;
 		// 局点信息
-		function showActionTransChart(sipResult,dipResult) {
+		function showRealTimeTransChart(appType,entranceId) {
+			var time1=(new Date().getTime())-(1000 * 60 * 10+1000 * 60 * 5);
+			var time2=(new Date().getTime())-(1000 * 60 * 5);//推迟五分钟
+			var beginDate=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time1)); //获取十个点
+			var endDate=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time2)); // 少算一分钟
+			var sipResult=new Array();
+			var dipResult=new Array();
+			var intData = realTimeTrendAjax(beginDate, endDate,appType,entranceId); //初始化数据 为10个点
+			sipResult=intData.sipResult;
+			dipResult=intData.dipResult;
 			var nowDate=new Date();
-			Highcharts.setOptions({ global: { useUTC: false } }); 
+			Highcharts.setOptions({ global: { useUTC: false } });
 			var num=0;
-			var chart = Highcharts.chart('chart',
+			var chart = Highcharts.chart('chart-realTime',
 							{
 			       chart: {
 // 			    	   		type: 'spline',
+							type: 'area',
 			           		marginRight: 10,
 // 			           		events: {
 // 			           			events: {
@@ -562,46 +589,70 @@
 								},
 									series: [{
 										name: '<spring:message code="client_ip"/>',
+										lineColor:'#a9d4cf',
+										lineWidth:1,
+										marker: {
+								            enabled: false
+								        },
 										data: (function () {
 											var data = [];
 											if(sipResult!=null&&sipResult.length>0){
 											var count=10;
-											if(sipResult.length<10){
-												count=sipResult.length;
-											}
-											for (var i = 0; i <= count; i++) {
-												var d =sipResult[i];
-				        						var x = d[0], // 时间
-				        							y = d[1];
+												if(sipResult.length<10){
+													count=sipResult.length;
+												}
+												for (var i = 0; i < count; i++) {
+													var d =sipResult[i];
+					        						var x = d[0], // 时间
+					        							y = d[1];
+													data.push({
+														x: x,
+														y: y
+													});
+												}
+											} else{
+												var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
+												for (var i = 0; i <10; i++) {
 												data.push({
-													x: x,
-													y: y
+													x: time + i * 1000*60,
+													y: 0
 												});
-											}
-											num=count;
-											}
+												}
+											} 
 											return data;
 										}())
 									},
 									{
 										name: '<spring:message code="server_ip"/>',
+										lineColor:'#a9d4cf',
+										lineWidth:1,
+										marker: {
+								            enabled: false
+								        },
 										data: (function () {
 											var data = [];
 											if(dipResult!=null&&dipResult.length>0){
-											var count=10;
-											if(dipResult.length<10){
-												count=dipResult.length;
+												var count=10;
+												if(dipResult.length<10){
+													count=dipResult.length;
+													}
+								                for (var i = 0; i < count; i++) {
+												var d =dipResult[i];
+				        						var x = d[0], // 当前时间
+				        							y = d[1];
+													data.push({
+														x: x,
+														y: y
+													});
 												}
-							                for (var i = 0; i <= count; i++) {
-											var d =dipResult[i];
-			        						var x = d[0], // 当前时间
-			        							y = d[1];
+											}else{
+												var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
+												for (var i = 0; i <10; i++) {
 												data.push({
-													x: x,
-													y: y
+													x: time + i * 1000*60,
+													y: 0
 												});
-											}
-							                 num=count;
+												}
 											}
 											return data;
 										}())
@@ -611,24 +662,159 @@
 				 	var series = chart.series[0];
 			        var series1 = chart.series[1];
 			        window.clearInterval(timer);
-			       if(sipResult!=null&&sipResult.length>0){
+// 			       if(sipResult!=null&&sipResult.length>0){
 			        timer=setInterval(function() {
-				            var d =sipResult[num];
-					            series.addPoint([d[0], d[1]], true, true);
-				            
-				            var t =dipResult[num];
-					            series1.addPoint([t[0], t[1]], true, true);
-							num=num+1;
-							if(num==sipResult.length){
-								num=0;
-								window.clearInterval(timer);
-								return
+			        	var time3=(new Date().getTime())-(1000 * 60 * 5);
+			        	var time4=(new Date().getTime())-(1000 * 60 * 4);
+			        	var begin=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time3)); //获取1个点少算一分钟
+						var end=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time4)); 
+			        	$.ajax({
+							url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+begin+"&endDate="+end+"&entranceId="+entranceId,
+							type : "post",
+							dataType : "json",
+							cache:false,
+							async : true,
+							success : function(rs) {
+								var realTimeData=rs;
+					        	if(realTimeData!=null&&Object.keys(realTimeData).length>0){
+								var sipReal=realTimeData.sipResult;
+								var dipReal=realTimeData.dipResult;
+						            var d =sipReal[0];
+							            series.addPoint([d[0], d[1]], true, true);
+						            var t =dipReal[0];
+							            series1.addPoint([t[0], t[1]], true, true);
+						        }else{
+							        var x=(new Date()).getTime()-(1000 * 60 * 5);
+									var y=0;
+									series.addPoint([x, y], true, true);
+									series1.addPoint([x, y], true, true);
+							     }
+								
+								closeTip();
+							},
+							error : function(data, textStatus, errorThrown) {
+								closeTip();
+							},
+							complete : function(XMLHttpRequest, status) {//超时设置
+								closeTip();
 							}
-				      	},3000);
-			       }else{
-			    	   num=0;
-						window.clearInterval(timer);
-				    }
+						});
+				      	},1000*60);
+// 			       }else{
+// 						window.clearInterval(timer);
+// 				    }
+		}
+		// 历史信息
+		function showActionHistoryChart(sipResult,dipResult) {
+			var nowDate=new Date();
+			Highcharts.setOptions({ global: { useUTC: false } }); 
+			var num=0;
+			var chart = Highcharts.chart('chart-history',
+							{
+			       chart: {
+			    	   		type: 'area',
+							zoomType: 'x'
+			        		},
+								noData:{
+					    			style: {//设置字体颜色
+										color: '#413333',
+										fontFamily:'Microsoft YaHei',
+										fontWeight:"unset",
+									},
+					    		},
+								exporting : {
+									filename : '<spring:message code="${appName}"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
+									scale : 1,
+									sourceWidth : 1280,
+									sourceHeight : 500,
+									buttons : {
+										contextButton : {
+											menuItems : [
+													Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
+													Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
+													'downloadPNG','downloadPDF',
+													Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
+													Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
+											]
+										}
+									}
+								},
+								colors:['#a9d4cf','#eecf8d'],
+								title : {
+									text : null
+								},
+								xAxis: {
+									type:'datetime',
+									dateTimeLabelFormats: {
+										second: '%H:%M:%S',
+										minute: '%H:%M',
+										hour: '%H:%M',
+										day: '%m-%d',
+										week: '%m-%d',
+										month: '%Y-%m',
+										year: '%Y'
+									},
+									title: {
+											text: 'time',
+											align:'high',
+									},
+									labels: { 
+// 							             rotation: -45, //倾斜的角度
+							         },
+								},
+								yAxis : {
+									title : {
+										text : null
+									},
+									min:0,
+									allowDecimals:false
+								},
+								tooltip: {
+									dateTimeLabelFormats: {
+										millisecond: '%Y-%m-%d %H:%M:%S',
+										second: '%Y-%m-%d %H:%M:%S',
+										minute: '%Y-%m-%d %H:%M:%S',
+										hour: '%Y-%m-%d %H:%M:%S',
+										day: '%Y-%m-%d %H:%M:%S',
+										week: '%Y-%m-%d %H:%M:%S',
+										month: '%Y-%m-%d %H:%M:%S',
+										year: '%Y-%m-%d %H:%M:%S'
+									}
+								},
+								credits : {//是否有水印
+									enabled : false
+								},
+								plotOptions : {
+									series : {
+										marker : {
+											radius : 2,
+											hover : {
+												enabled : true,
+												radius : 7,
+												radiusPlus : 5
+											}
+										}
+									}
+								},
+									series: [{
+										name: '<spring:message code="client_ip"/>',
+										data: sipResult,
+										lineColor:'#a9d4cf',
+										lineWidth:1,
+										marker: {
+								            enabled: false
+								        }
+									},
+									{
+										name: '<spring:message code="server_ip"/>',
+										data: dipResult,
+										lineColor:'#eecf8d',
+										lineWidth:1,
+										marker: {
+								            enabled: false
+								        }
+									}]
+					});
 		}
 		(function(H) {
 			H.Chart.prototype.downloadXLS = function() {