flot 统计图总结（直方图，折线图，饼状图）

本文链接：https://blog.youkuaiyun.com/hxpjava1/article/details/6697085

发布一个k8s部署视频：https://edu.youkuaiyun.com/course/detail/26967

课程内容：各种k8s部署方式。包括minikube部署，kubeadm部署，kubeasz部署，rancher部署，k3s部署。包括开发测试环境部署k8s，和生产环境部署k8s。

腾讯课堂连接地址https://ke.qq.com/course/478827?taid=4373109931462251&tuin=ba64518

第二个视频发布 https://edu.youkuaiyun.com/course/detail/27109

腾讯课堂连接地址https://ke.qq.com/course/484107?tuin=ba64518

介绍主要的k8s资源的使用配置和命令。包括configmap，pod，service，replicaset，namespace，deployment，daemonset，ingress，pv，pvc，sc，role，rolebinding，clusterrole，clusterrolebinding，secret，serviceaccount，statefulset，job，cronjob，podDisruptionbudget，podSecurityPolicy,networkPolicy,resourceQuota，limitrange，endpoint，event，conponentstatus，node，apiservice，controllerRevision等。

第三个视频发布：https://edu.youkuaiyun.com/course/detail/27574

详细介绍helm命令，学习helm chart语法，编写helm chart。深入分析各项目源码，学习编写helm插件

————————————————

jsp代码：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri= "/struts-tags"  prefix= "s"  %> 

<script type="text/javascript" src="/script/checkform/report_menu.js">
</script>
<div class="tabtitle">
	<ul>
		<li class="activated"><a href="/members/report/menu.jsp">菜品统计</a></li>
	</ul>
	<div class="line"></div>
</div>
<form action="" id="form">
<div class="tables">
	<div class="cation">
		<ul>
			<li><a href="/condition=7" class="menu_report">最近7天</a><input type="hidden"  value="7"/></li>
			<li><a href="/condition=15" class="menu_report">最近15天</a><input type="hidden"  value="15"/></li>
			<li><a href="/condition=30" class="menu_report">最近30天</a><input type="hidden"  value="30"/></li>
			<li>自定义:<input type="text" class="ipttext Wdate" style="width:100px" name="begin" onfocus="WdatePicker({skin:'whyGreen'})" id="start"/> 至  <input type="text" class="ipttext Wdate" style="width:100px" name="end" onfocus="WdatePicker({skin:'whyGreen'})" id="end"/> <input type="button" value="统计" class="ipt_s_btn" id="menu_statistic"/>	</li>
		</ul>
	</div>

  	<div id="holders" style="display:none">
  		<div style="height:30px"></div>
		<div align="center">
			<div id="title1">111</div>
			<div id="placeholder1" style="width:800px;height:300px;"></div>
			
		</div>
		<div style="height:30px"></div>
		<div align="center">
			<div id="title2"></div>
			<div id="placeholder2" style="width:800px;height:300px;"></div>
			
		</div>
		<div style="height:30px"></div>
		<div align="center">
			<div id="title3"></div>
			<div id="placeholder3" style="width:500px;height:500px;"></div>
			
		</div>
	</div>
	<div class="inf" id="inf">
		
	</div>

</div>
</form>

js代码：

$(function(){
	$("a.menu_report").live("click",function(){
		$("#holders").attr("style","display:block");
		$(".cation").find("a").removeClass("activated");
		$(this).addClass("activated");
		var condition=$(this).next("input").val();
		
		if(condition==7){
			$("#title1").html("<h2>最近7天菜品消费数量排行</h2>");
			$("#title2").html("<h2>最近7天菜品消费金额排行</h2>");
			$("#title3").html("<h2>最近7天菜品销售贡献度</h2>");
		}else if(condition==15){
			$("#title1").html("<h2>最近15天菜品消费数量排行</h2>");
			$("#title2").html("<h2>最近15天菜品消费金额排行</h2>");
			$("#title3").html("<h2>最近15天菜品销售贡献度</h2>");
		}else if(condition==30){
			$("#title1").html("<h2>最近30天菜品消费数量排行</h2>");
			$("#title2").html("<h2>最近30天菜品消费金额排行</h2>");
			$("#title3").html("<h2>最近30天菜品销售贡献度</h2>");
		}
		$.getJSON("/members/report/consumptionRanking.action?condition="+$(this).next("input").val(),{},function(result){

			 var plot =$.plot($("#placeholder1"), [ result.data], {  xaxis: { ticks:result.label,tickLength:10,labelWidth:80},bars:{show:true, align:"center",barWidth:0.5},yaxis:{tickFormatter:function formatter(val, axis) {return val+"个"; },labelWidth:40},grid: { clickable: true ,hoverable:true} });
       		 $("#placeholder1").unbind("plothover");
			 $("#placeholder1").bind("plothover", function (event, pos, item) {
		         	if(item){
		         		
			        	$("#inf").css("display","block");
			        	$("#inf").html(item.series.xaxis.ticks[item.dataIndex].label+"<br/>消费数量"+item.series.data[item.dataIndex][1]+"个");
			        	
			        	var left=window.event.pageX || (window.event.clientX +     (document.documentElement.scrollLeft || document.body.scrollLeft))-84;
			        	var top=window.event.pageY || (window.event.clientY + (document.documentElement.scrollTop || document.body.scrollTop))-50; 
			        	$("#inf").offset({"left":left,"top":top});
			        }else{
			       		 $("#inf").css("display","none");
			        } 
			    	  
		        
			 });
			    

		});
		$.getJSON("/members/report/consumptionAmountRanking.action?condition="+$(this).next("input").val(),{},function(result){
			 var plot =$.plot($("#placeholder2"), [ result.data], { xaxis: { ticks:result.label,tickLength:10,labelWidth:80},bars:{show:true, align:"center",barWidth:0.5},yaxis:{tickFormatter:function formatter(val, axis) {return val+"元"; },labelWidth:40},grid: { clickable: true ,hoverable:true}});
       		 
			  $("#placeholder2").unbind("plothover");
			 $("#placeholder2").bind("plothover", function (event, pos, item) {
		         	if(item){
		         		
			        	$("#inf").css("display","block");
			        	$("#inf").html(item.series.xaxis.ticks[item.dataIndex].label+"<br/>消费金额"+item.series.data[item.dataIndex][1]+"个");
			        	
			        	var left=window.event.pageX || (window.event.clientX +     (document.documentElement.scrollLeft || document.body.scrollLeft))-84;
			        	var top=window.event.pageY || (window.event.clientY + (document.documentElement.scrollTop || document.body.scrollTop))-50; 
			        	$("#inf").offset({"left":left,"top":top});
			        }else{
			       		 $("#inf").css("display","none");
			        } 
			    	  
		        
			 });
		});
		$.getJSON("/members/report/salesContribution.action?condition="+$(this).next("input").val(),{},function(result){
			var data = [];
			
			for( var i = 0; i<result.data.length; i++)
				{
					data[i] = { label: result.label[i][1], data:result.data[i][1] }
				}
				
			$.plot($("#placeholder3"), data, { series :{pie : {
						show: true,
						radius: 1,
						label: {
							show: true,
							radius: 3/4,
							formatter: function(label, series){
								return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
							},
							background: { opacity: 0.5 }
						}
				}}
					,legend: {
						show: false
					}
					,grid: { clickable: true ,hoverable:true}
				});
				
				
       		 
		});
		

		return false;
	})
	
	$("#placeholder3").bind("plothover", pieHover);

	$("#menu_statistic").live("click",function(){
		if($("#start").val()==null||$("#start").val()==""){
			alert("请输入开始时间");
			return false;
		}
		if($("#end").val()==""||$("#end").val()==null){
			alert("请输入结束时间");
			return false;
		}
		if($("#start").val()>$("#end").val()){
			alert("结束时间必须大于开始时间");
			return false;
		}
		var startArray=$("#start").val().split("-");
		var endtArray=$("#end").val().split("-");
		var start=new Date(startArray[0],startArray[1],startArray[2],0,0,0);
		var end=new Date(endtArray[0],endtArray[1],endtArray[2],0,0,0);
		if(end.valueOf()-start.valueOf()>30*24*60*60*1000){
			alert("开始和结束时间间隔不能超过30天");
			return false;
		}
		
		$(".cation").find("a").removeClass("activated");
		$("#holders").attr("style","display:block");
		$("#title1").html("<h2>从"+$("#start").val()+"到"+$("#end").val()+"菜品消费数量排行</h2>");
		$("#title2").html("<h2>从"+$("#start").val()+"到"+$("#end").val()+"菜品消费金额排行</h2>");
		$("#title3").html("<h2>从"+$("#start").val()+"到"+$("#end").val()+"菜品销售贡献度</h2>");
		$.getJSON("/members/report/consumptionRanking.action?"+$("#form").serialize(),{},function(result){
			  var plot =$.plot($("#placeholder1"), [ result.data], { xaxis: { ticks:result.label,tickLength:10,labelWidth:80},bars:{show:true, align:"center",barWidth:0.5},yaxis:{tickFormatter:function formatter(val, axis) {return val+"个";},labelWidth:40},grid: { clickable: true ,hoverable:true}});
       			$("#placeholder1").unbind("plothover");
			 $("#placeholder1").bind("plothover", function (event, pos, item) {
		         	if(item){
		         		
			        	$("#inf").css("display","block");
			        	$("#inf").html(item.series.xaxis.ticks[item.dataIndex].label+"<br/>消费金额"+item.series.data[item.dataIndex][1]+"个");
			        	
			        	var left=window.event.pageX || (window.event.clientX +     (document.documentElement.scrollLeft || document.body.scrollLeft))-84;
			        	var top=window.event.pageY || (window.event.clientY + (document.documentElement.scrollTop || document.body.scrollTop))-50; 
			        	$("#inf").offset({"left":left,"top":top});
			        }else{
			       		 $("#inf").css("display","none");
			        } 
			    	  
		        
			 });	 
		
		});
		$.getJSON("/members/report/consumptionAmountRanking.action?"+$("#form").serialize(),{},function(result){
			 var plot =$.plot($("#placeholder2"), [ result.data], { xaxis: { ticks:result.label,tickLength:10,labelWidth:80},bars:{show:true, align:"center",barWidth:0.5},yaxis:{tickFormatter:function formatter(val, axis) {return val+"元"; },labelWidth:40},grid: { clickable: true ,hoverable:true}});
       		$("#placeholder2").unbind("plothover");
			 $("#placeholder2").bind("plothover", function (event, pos, item) {
		         	if(item){
		         		
			        	$("#inf").css("display","block");
			        	$("#inf").html(item.series.xaxis.ticks[item.dataIndex].label+"<br/>消费金额"+item.series.data[item.dataIndex][1]+"个");
			        	
			        	var left=window.event.pageX || (window.event.clientX +     (document.documentElement.scrollLeft || document.body.scrollLeft))-84;
			        	var top=window.event.pageY || (window.event.clientY + (document.documentElement.scrollTop || document.body.scrollTop))-50; 
			        	$("#inf").offset({"left":left,"top":top});
			        }else{
			       		 $("#inf").css("display","none");
			        } 
			    	  
		        
			 });	 
		
		});
		$.getJSON("/members/report/salesContribution.action?"+$("#form").serialize(),{},function(result){
			 var data = [];
			
			for( var i = 0; i<result.data.length; i++)
				{
					data[i] = { label: result.label[i][1], data:result.data[i][1] }
				}
				
			$.plot($("#placeholder3"), data, { series :{pie : {
						show: true,
						radius: 1,
						label: {
							show: true,
							radius: 3/4,
							formatter: function(label, series){
								return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
							},
							background: { opacity: 0.5 }
						}
				   }}
					,legend: {
						show: false
					}
					,grid: { clickable: true ,hoverable:true}
				});
       		 
		});
		return false;
	})
	
});

function pieHover(event, pos, obj) 
	{
		 $("#inf").css("display","none");
		if (!obj)
	                return;
	     
		percent = parseFloat(obj.series.percent).toFixed(2);
		$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
				if(obj){
		         		
			        	$("#inf").css("display","block");
			        	$("#inf").html(obj.series.label+"<br/>贡献度"+percent+"%");
			        	
			        	var left=window.event.pageX || (window.event.clientX +     (document.documentElement.scrollLeft || document.body.scrollLeft))-84;
			        	var top=window.event.pageY || (window.event.clientY + (document.documentElement.scrollTop || document.body.scrollTop))-50; 
			        	$("#inf").offset({"left":left,"top":top});
			        }else{
			       		 $("#inf").css("display","none");
			        } 		
	}