Highcharts Spring Boot配置
阿新 • • 發佈：2019-01-11
Highcharts Spring Boot配置
專案中需要用到圖形報表功能，下面將引用方法簡單介紹：
介紹
使用Spring Boot與freemarker
實現
- 建立Spring Boot專案，並修改pom.xml（匯入依賴包）
<!--spring freemarker依賴-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</ - 修改application.properties，讓系統支援ftl
## Freemarker 配置
## 檔案配置路徑
spring.freemarker.cache=false
spring.freemarker.charset=UTF-8
spring.freemarker.check-template-location=true
spring.freemarker. - 建立公共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>