<%@page import="java.net.URLEncoder"%><%@
page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><%@
taglib prefix="s" uri="/struts-tags"%><%@
taglib prefix="p" uri="/pagination-tags"%><%@
taglib prefix="sj" uri="/struts-jquery-tags"%><!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
xmlns="http://www.w3.org/1999/xhtml"><head><meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8"
/><meta
http-equiv="X-UA-Compatible"
content="IE=EmulateIE8"
/><title>广播室申请记录</title><link
rel="stylesheet" type="text/css"
href="${staticURL}/style/module/${_user_defaultCss}/active_main.css"
id="activeStyle"></link><link
rel="stylesheet" type="text/css"
href="${staticURL}/style/common.css"></link><script
type="text/javascript"
src="${staticURL}/scripts/jquery/jquery-1.7.1.min.js"></script><script
type="text/javascript"
src="${staticURL}/scripts/jquery/jquery.alerts.js"></script><link
href="${staticURL}/scripts/jquery/jquery.qtip.min.css"
rel="stylesheet" type="text/css"></link><script
type="text/javascript"
src="${staticURL}/scripts/jquery/jquery.qtip.min.js"></script><script
type="text/javascript"
src="${staticURL}/scripts/common.js"></script><script
language="javascript"
src="${staticURL}/scripts/My97DatePicker/WdatePicker.js"
type="text/javascript"></script><%--
<script
src="${staticURL}/scripts/jquery/exporting.js"></script>
--%><%--
<script
src="${staticURL}/scripts/jquery/highcharts.js"></script>
--%><%--
<script
src="${staticURL}/scripts/jquery/ajaxjs.js"></script>
--%><%--
<script
src="${staticURL}/scripts/jquery/jquery.js"></script>
--%><script
type="text/javascript"
src="${staticURL}/scripts/Highcharts-4.0.1/highcharts.js"></script>
<script
type="text/javascript"
src="${staticURL}/scripts/jquery/jquery-ui-1.10.1.js"></script><script
type="text/javascript">
/* function searchs() {
if(validateQuery()){
document.searchForm.action = "searchGuanggaoDiff.action";
document.searchForm.submit();
}
} */
//判断日期 function validateQuery() { var versionDate = document.getElementById("selDate").value;
var versionEndDate = document.getElementById("selEndDate").value; if (versionDate == null || versionDate == "" || versionEndDate == null
|| versionEndDate == "") { jAlert('开始时间和结束时间都不能为空!', '提示'); return false;
} if (versionDate > versionEndDate) { jAlert('开始日期必须小于结束日期!', '提示'); return
false; } return true;
} // /////////////////////////////////////////////////////////////////////////////////////////////////////
//查询 function searchs() {
//============================查询结果============================================ var starttime=$("#selDate").val();
var endtime=$("#selEndDate").val(); var showPlaceCode=$("#selectedType").val(); var monthList = "";
if(starttime=="") { jAlert("请选择开始时间!"); return;
} else if(endtime=="") {
jAlert("请选择结束时间!"); return; }
else if(showPlaceCode=="") { jAlert("请选择频道!"); return;
}
alert(starttime+" kaishi "+endtime+" jies "+showPlaceCode);
$.ajax({ type:"POST", url:"SearchApplyRecords.action",
data:{
inTime:starttime, outTime:endtime, studioCode:showPlaceCode,
}, ContentType:'json', success:function(data){
alert("success!"); $.each(data,function(index,item){ //alert(item.count);
monthList += +item.count + ",";
});
monthList = monthList.substring(0,monthList.length - 1); alert(monthList);
//-------------------------------查询结果-----------------------------------------
chart = new Highcharts.Chart({ chart : { renderTo : 'container',//这是div的引用id
type : 'line', marginRight : 300, marginBottom : 100, //marginTop:100,
}, title : { text : '演播室申请时段分布图',
x : -20 //center这是上面句话显示的位置距离Y轴的距离 }, subtitle : {
text : '2015/5/6', x : -20 //这是上面句话显示的位置距离Y轴的距离 },
xAxis : { title : { text : 'Time (Ho)' //这是x轴线代表的含义(即x轴线的标题) },
categories : [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22',
'23' ] }, yAxis : {
title : { text : 'Count (Nu)' //这是Y轴线代表的含义(即x轴线的标题) }, min : 0,
plotLines : [ { value : 0,//这是y轴线的起始值 width : 1,//这是y轴线的宽度 color : '#808080'
} ] }, //数据显示在折线上
plotOptions : { series : { dataLabels : { align : 'right',//数据值显示位置
enabled : false,//是否显示数据值 rotation : 0,//数据值旋转角度 x : 2,//数据值在x轴上位置 y : -10
//数据值在y轴上位置 } }
}, //数据展示
series : [ {
name : '申请次数', //categories: eval("["+monthList+"]"),//
data : [ 3.9, 4.2, 0, 0, 0.9, 0.2, 17.0, 16.6, 14.2, 10.3, 6.6,//
4.8, 2.5, 2, 3, 4, 5, 6, 7, 8, 8, 9, 4, 6, 7 ] data:
eval("["+monthList+"]")
}
] });
}
});
////----结尾 * }
///////////////////////////////////////////////////////////</script></head><body>
<div id="main_content"> <s:form id="searchForm" method="post" theme="simple" enctype="multipart/form-data">
<s:hidden name="maxDate"></s:hidden> <div class="fubar_top_div"> <a class="fubar_lable">开始时间</a> <input id="selDate" type="text"
name="audienceReport.start_date" class="fubar_ipt_date" class="Wdate" value="${audienceReport.start_date}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',
maxDate:'${maxDate}', isShowOthers:true})" /> <a class="fubar_lable">结束时间</a> <input id="selEndDate" type="text"
name="audienceReport.end_date" class="fubar_ipt_date" class="Wdate" value="${audienceReport.end_date}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',
maxDate:'${maxDate}', isShowOthers:true})" /> <a class="fubar_lable">频道</a>
<s:select class="fubar_select" id="selectedType" name="audienceReport.channelCode" list="showPlaceList" listKey="code" listValue="name"
headerKey="" headerValue="--请选择频道--"> </s:select>
<a class="btn_search" onclick="searchs()"></a> </div> </s:form>
<div id="container>
1. 列表内容 style="min-width: 450px; height: 370px; margin: 10px 50px 50px 0px;"></div></body></div><%--
<script
src="${staticURL}/scripts/jquery/exporting.js"></script><script
src="${staticURL}/scripts/jquery/highcharts.js"></script>
--%></html>
hightchart 报表
最新推荐文章于 2020-11-24 14:02:46 发布