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");
}
}
