1. 程式人生 > >Highcharts Spring Boot配置

Highcharts Spring Boot配置

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>