Question

我将Chart.js集成到我的Spring Boot项目中。没有显示图表，我没有理由。

我添加了所有必需的js库jquery，还引导了chart.js的css文件，但未显示任何内容，并且在控制台中没有错误。任何机构对这个问题都有一个想法?????

我认为百里香无法读取html页面中包含的chart.js的css文件而又不知道原因的问题是因为我在我的Spring项目之外的独立html页面Web中测试了此代码，并且可以正常工作。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="template">
<head>
<meta charset="utf-8" name="viewport"
	content="width=device-width, initial-scale=1" />
<title>DOT</title>
<link rel="stylesheet" type="text/css"
	href="../static/css/Chart.css" th:href="@{/css/Chart.css}" />
 <link rel="stylesheet" type="text/css"
	href="../static/css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" />
 <link rel="stylesheet" type="text/css" href="../static/css/myStyle.css"
	th:href="@{/css/myStyle.css}" />

<link rel="stylesheet" type="text/css"
	href="../static/css/font-awesome.min.css"
	th:href="@{/css/font-awesome.min.css}" />






 <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{js/html5shiv.min.js}"></script>
<script type="text/javascript" th:src="@{js/respond.min.js}"></script> 
<script type="text/javascript" th:src="@{js/Chart.js}"></script>
<script type="text/javascript" th:src="@{js/Chart.bundle.js}"></script>





</head>
<body>


	<div layout:fragment="content">

		<div class="container col-md-6">
			<canvas id="my" height="400" width="400"> </canvas>

		</div>

<script>

var ctx = document.getElementById('my').getContext('2d');
data = {
    datasets: [{
        data: [10, 20, 30],
            backgroundColor:[ 'rgb(255, 99, 132)', 'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderColor: [ 'rgb(255, 99, 132)', 'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ]
    }],

    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
	
};

var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data
	
    
});

<script/>

</div>
</body>


 <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{js/html5shiv.min.js}"></script>
<script type="text/javascript" th:src="@{js/respond.min.js}"></script> 
<script type="text/javascript" th:src="@{js/Chart.js}"></script>
<script type="text/javascript" th:src="@{js/Chart.bundle.js}"></script>
</html>

Thymeleaf不显示图表

0 个答案: