hightchart 报表

来源：互联网发布：里程积分知乎编辑：程序博客网时间：2024/06/05 15:28

<%@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><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/><metahttp-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><scripttype="text/javascript"src="${staticURL}/scripts/common.js"></script><script language="javascript" src="${staticURL}/scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script><%--<scriptsrc="${staticURL}/scripts/jquery/exporting.js"></script> --%><%--<scriptsrc="${staticURL}/scripts/jquery/highcharts.js"></script> --%><%--<scriptsrc="${staticURL}/scripts/jquery/ajaxjs.js"></script> --%><%--<scriptsrc="${staticURL}/scripts/jquery/jquery.js"></script> --%><scripttype="text/javascript"src="${staticURL}/scripts/Highcharts-4.0.1/highcharts.js"></script><scripttype="text/javascript"src="${staticURL}/scripts/jquery/jquery-ui-1.10.1.js"></script><scripttype="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><%--<scriptsrc="${staticURL}/scripts/jquery/exporting.js"></script><scriptsrc="${staticURL}/scripts/jquery/highcharts.js"></script> --%></html>

0 0