Highcharts Spring Boot配置
Highcharts Spring Boot配置
项目中需要用到图形报表功能，下面将引用方法简单介绍：
介绍
使用Spring Boot与freemarker
实现
- 创建Spring Boot项目，并修改pom.xml（导入依赖包）
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-freemarkerartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
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">
<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>TITLEtitle>
<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>
<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>
<script type="text/javascript">
Highcharts.chart('container1', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '2018年1月浏览器市场份额'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {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实例，如果我们要从后台拉数据，并生成报表，如下所示：
<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}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: '比例',
data: data
}]
});
});
}
script>