Highcharts Spring Boot構成
47628 ワード
Highcharts Spring Boot構成
プロジェクトでグラフィック・レポート機能を使用する必要があります.次に、参照方法を簡単に説明します.
紹介する
Spring Bootとfreemarkerの使用
インプリメンテーション Spring Bootプロジェクトを作成しpomを変更する.xml(依存パッケージのインポート) アプリケーションを修正する.properties、ftl をシステムにサポートさせる共通jsとcssのftl(共通jsとcssをカプセル化するために使用され、他のページが必要に応じて直接参照できる)を作成し、 . Highchartsを使用するページにHighcharts依存 を導入する. Highcharts図 を作成
プロジェクトでグラフィック・レポート機能を使用する必要があります.次に、参照方法を簡単に説明します.
紹介する
Spring Bootとfreemarkerの使用
インプリメンテーション
<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>
## 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
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">
<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>
<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>