使用highChart做报表统计

Bertha 。 2022-08-11 04:30 194阅读 0赞

下载Highcharts的包，导入到页面，这些都不用说了。直接来看代码的。

这是页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@ page import="gx.util.base.SecurityUtil"%>
    <%
    	String contextPath = request.getContextPath();
    	SecurityUtil securityUtil = new SecurityUtil(session);
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <title>参考信息统计</title>
    <jsp:include page="../../inc.jsp"></jsp:include>
    <script type="text/javascript">
    $(function() {
    	loadYear(); // 加载年份
    	loadMonth(); // 加载月份
    	tjEvent(); // 设置月份信息是否隐藏
    	graphing(); // 生成报表
    });
    
    // 设置月份信息是否隐藏
    function tjEvent() {
    		if($('#tj').val() == "year") {
    			$('#month').css("display","none");
    		}
    		if($('#tj').val() == "month") {
    			$('#month').css("display","visible");
    		}
    }
    // 生成报表
    function graphing() {
    	if($('#tj').val() == "month" && $('#month').val() == "") {
    		alert("请选择月份!");
    		return;
    	} 
    	
    	var year = $('#year').val();
    	var month = $('#month').val();
    	var seriesType = $('#seriesType').val(); // 获取图表类型
    	
     	var test = new chart();
    	test.seriesType = seriesType;
    	test.titleName = "参考信息统计";
    	test.yTitle = "参考信息统计数(条)";
    	test.xCategories = xValue(year, month);
    	if(seriesType == "pie") {
     		test.format = '{series.name}: <b>{point.percentage:.1f}%</b>';
     	} else {
     		test.format = '{series.name}: <b>{point.y}</b>';
     	}
    	
    	if(month == "") {
    		$.post(gx.contextPath + '/base/reference-information!statistical.gx', {year:year}, function(result) {
    			test.data_content =
    		        [{
    		            name: '参考信息条数',
    		            data: result, 
    		        }];
    			test.createChart();
    		},'json'); 
    	} else {
    		$.post(gx.contextPath + '/base/reference-information!statistical.gx', {year:year,month:month}, function(result) {
    			test.data_content =
    		        [{
    		            name: '参考信息条数',
    		            data: result, 
    		        }];
    			test.createChart();
    		},'json'); 
    	}
    }
    
    // 获取年份信息
    function loadYear() {
    	var nowYear = +(new Date().getFullYear()); // 获得当前年份
    	for (var i=10; i>0; i--) { // 前十年
    		$('#year').append('<option value="'+(nowYear+i-10)+'">'+(nowYear+i-10)+'年</option>');
    	}
    }
    // 获取月份信息
    function loadMonth() {
    	for (var i=1; i<13; i++) { // 12个月
    		$('#month').append('<option value="'+i+'">'+i+'月</option>');
    	}
    }
    </script>
    </head>
    <body>
    	
    	<div id="td">
    		 <lable style="font-family:verdana;font-size:80%">选择：</lable>
    		<select id="tj" name="tj" οnclick="tjEvent()">
    			<option value="year">年度统计</option>
    			<option value="month">月份统计</option>
    		</select>
    		 
    		<select id="year" name="year">
    		</select>
    		 
    		<select id="month" name="month">
    			<option value="">月份...</option>
    		</select>
    		 
    		<select id="seriesType" name="seriesType">
    			<option value="line">折线图</option>
    			<option value="column">柱状图</option>
    			<option value="pie">饼状图</option>
    		</select>
    		    
    		<input type="button" value="生成图表" οnclick="graphing()"/>
    	</div>
    	
    	
    	<div id="container"></div>
    </body>
    </html>

这是用到的js,Highcharts扩展：

这样，需要报表时，调用chart的createChart方法，设置的那些变量值都可以动态传入，省去了很多重复代码。