SSH综合项目实战（快递） -- day15 highcharts实现图形报表

最新推荐文章于 2019-06-06 21:57:56 发布

DJTUDaker

最新推荐文章于 2019-06-06 21:57:56 发布

阅读量572

点赞数

分类专栏： ssh项目实战

本文链接：https://blog.csdn.net/wingzhezhe/article/details/78039908

版权

ssh项目实战专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、highcharts介绍

二、项目中嵌入highcharts

1、在后台系统中引入highcharts的资源文件

2、编写highcharts示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼形图</title>
<!-- 引入highcharts相关资源文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script src="js/highcharts/highcharts.js"></script>
<script src="js/highcharts/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '2014 某网站各浏览器浏览量占比'
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: '浏览器访问量占比',
            data: [
                ['Firefox',   45.0],
                ['IE',        26.8],
                ['Safari',     8.5],
                ['Opera',      6.2],
                ['其他',        0.7]
            ]
        }]
    });
});
</script>
</head>
<body>
	<div id="container"></div>
</body>
</html>

3、页面效果展示

三、在项目中展示分区分布图（饼形图）

1、在sub_area.html中引入highcharts相关资源文件

2、添加展示分布图的按钮

3、提供一个窗口，存放饼状图

		<!-- 分区分布图展示窗口 -->
		<div class="easyui-window" title="分区分布图" id="chartWindow" collapsible="false" 
				minimizable="false" maximizable="false" style="top:20px;left:200px">
			<!-- 分区分布图展示的容器 -->
			<div id="container"></div>
		</div>

	//页面加载完成后，对饼状图的窗口设置高度并进行隐藏
	$('#chartWindow').window({
        width: 700,
        modal: true,
        shadow: true,
        closed: true,
        height: 600,
        resizable:false
    });

4、编写按钮绑定事件

		//展示分区分布图的饼状图
		function doshow(){
			$("#charWindow").window("open");
			//发送ajax请求，获取数据，用于展示饼状图
			var url = "../../subareaAction_showSubareaChart.aciton";
			$.post(url,function(){
				$('#container').highcharts({
			        title: {
			            text: '分区分布图'
			        },
			        series: [{
			            type: 'pie',//展示的是饼状图
			            name: '分区数量',
			            data: data
			        }]
			    });
			});
		}

5、编写SubAreaAction中代码

	/**
	 * 展示分区分布饼状图
	 */
	@Action(value="subareaAction_showSubareaChart")
	public String showSubareaChart(){
		List<Object> list = service.findSubareas();
		this.list2Json(list, null);
		return NONE;
	}

6、编写SubareaService代码

	/**
	 * 展示分区分布图
	 */
	public List<Object> findSubareas() {
		return dao.findSubareas();
	}

7、编写SubareaDao代码

	@Query(value="select a.province, count(*) from SubArea s inner join s.area a group by a.province")
	public List<Object> findSubareas();

四、JasperReport + IReport 进行PDF报表设计

1、JasperReport 开发包

2、安装PDF报表设计生成软件

3、基于iReport进行报表格式的设计

（1）、创建文件，选择模版

（2）、设置预览方式，改为PDF preview

（3）、设置亚洲字体库

（4）、设置没有数据时的显示

（5）、使用静态文本

（6）、设计数据源，获取数据库中动态数据

4、将设计好的模版文件（.jrxml）放入到项目中

5、在common-parent工程的pom.xml中导入iReporter所依赖的jar包坐标

		<!-- itext -->
		<dependency>
			<groupId>com.lowagie</groupId>
			<artifactId>itext</artifactId>
			<version>2.1.7</version>
		</dependency>
		<dependency>
			<groupId>com.itextpdf</groupId>
			<artifactId>itext-asian</artifactId>
			<version>5.2.0</version>
		</dependency>

		<!-- groovy -->
		<dependency>
			<groupId>org.codehaus.groovy</groupId>
			<artifactId>groovy-all</artifactId>
			<version>2.2.0</version>
		</dependency>

		<!-- jasperreport -->
		<dependency>
			<groupId>net.sf.jasperreports</groupId>
			<artifactId>jasperreports</artifactId>
			<version>5.2.0</version>
			<exclusions>
				<exclusion>
					<groupId>com.lowagie</groupId>
					<artifactId>itext</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

6、在area.html中添加一个导出到PDF的按钮以及点击事件

7、编写Action中的代码

	@Autowired
	private DataSource dataSource;
	
	/**
	 * 导出PDF报表---基于JasperReport API实现导出
	 */
	@Action(value = "areaAction_exportPDF")
	public String exportPDF() throws Exception{
		// 读取 jrxml 文件
		String jrxml = ServletActionContext.getServletContext().getRealPath("/jr/test1.jrxml");
		// 准备需要数据
		Map<String, Object> parameters = new HashMap<String, Object>();
		parameters.put("company", "传智播客");
		// 准备需要数据
		JasperReport report = JasperCompileManager.compileReport(jrxml);
		JasperPrint jasperPrint = JasperFillManager.fillReport(report, parameters, dataSource.getConnection());

		HttpServletResponse response = ServletActionContext.getResponse();
		OutputStream ouputStream = response.getOutputStream();
		// 设置相应参数，以附件形式保存PDF
		response.setContentType("application/pdf");
		response.setCharacterEncoding("UTF-8");
		response.setHeader("Content-Disposition", "attachment; filename=" + FileUtils.encodeDownloadFilename("区域数据报表统计.pdf",
				ServletActionContext.getRequest().getHeader("user-agent")));
		// 使用JRPdfExproter导出器导出pdf
		JRPdfExporter exporter = new JRPdfExporter();
		exporter.setParameter(JRExporterParameter.JASPER_PRINT, jasperPrint);
		exporter.setParameter(JRExporterParameter.OUTPUT_STREAM, ouputStream);
		exporter.exportReport();// 导出
		ouputStream.close();// 关闭流

		return NONE;
	}