Highcharts Spring Boot配置
项目中需要用到图形报表功能，下面将引用方法简单介绍：
介绍
使用Spring Boot与freemarker
实现
- 创建Spring Boot项目，并修改pom.xml（导入依赖包）
<!--spring freemarker依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<!--spring boot web依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--spring thymeleaf依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
- 修改application.properties，让系统支持ftl
## Freemarker 配置
## 文件配置路径
spring.freemarker.cache=false
spring.freemarker.charset=UTF-8
spring.freemarker.check-template-location=true
spring.freemarker.content-type=text/html
spring.freemarker.expose-request-attributes=true
spring.freemarker.expose-session-attributes=true
spring.freemarker.request-context-attribute=request
spring.freemarker.suffix=.ftl
- 创建公共js与css的ftl（用于封装公共js与css，其它页面需要时可直接引用）,
下图代码并没有Highcharts相关依赖，并不是所有页面都需要用到图形报表
<#macro html title charset="utf-8" lang="zh-CN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>TITLE</title>
<link rel="icon" href="../img/logo.png" sizes="32x32">
<meta name="description" content="">
<meta name="keywords" content="" />
<link rel="stylesheet" href="../css/linearicons.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/magnific-popup.css">
<link rel="stylesheet" href="../css/nice-select.css">
<link rel="stylesheet" href="../css/animate.min.css">
<link rel="stylesheet" href="../css/owl.carousel.css">
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<#nested>
</body>
</html>
</#macro>
其它页面调用方式
<!-- 同级目录下调用方式 -->
<#include "indexDep.ftl">
- 在使用Highcharts的页面引入Highcharts依赖
<header>
<script src="../js/vendor/jquery-2.2.4.min.js"></script>
<script src="../js/vendor/bootstrap.min.js"></script>
<script src="../js/easing.min.js"></script>
<script src="../js/hoverIntent.js"></script>
<script src="../js/superfish.min.js"></script>
<script src="../js/jquery.ajaxchimp.min.js"></script>
<script src="../js/jquery.magnific-popup.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/owl-carousel-thumb.min.js"></script>
<script src="../js/jquery.sticky.js"></script>
<script src="../js/jquery.nice-select.min.js"></script>
<script src="../js/parallax.min.js"></script>
<script src="../js/waypoints.min.js"></script>
<script src="../js/wow.min.js"></script>
<script src="../js/jquery.counterup.min.js"></script>
<script src="../js/mail-script.js"></script>
<script src="../js/main.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://img.hcharts.cn/highcharts/themes/sand-signika.js"></script>
</header>
- 创建一个Highcharts图
<body>
<!-- 在body内定义一个报表展示域，用于图表渲染时使用 -->
<section class="about-area section-gap">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-5 about-right">
<div id="container1" style="height: 400px; margin: 0 auto"></div>
</div>
</div>
</div>
</section>
<!-- 编辑JS，创建一个报表 -->
<script type="text/javascript">
Highcharts.chart('container1', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '2018年1月浏览器市场份额'
},
tooltip: {
pointFormat: '{series.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: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
</script>
</body>
上面是一个简答的Highcharts实例，如果我们要从后台拉数据，并生成报表，如下所示：
<!-- 编辑JS，创建一个报表 -->
<script type="text/javascript">
var chart = null;
function getIssueProportion(param) {
$.getJSON('/backend/method?param='+param, function (data) {
chart = Highcharts.chart('container1', {
title: {
text: '饼状图'
},
tooltip: {
pointFormat: '{series.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'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: '比例',
data: data
}]
});
});
}
</script>