Thymeleaf集成外部Chart.js时drawchart函数未执行问题求助

嘿，我找到你代码里的问题啦！虽然你已经成功把后端的label和point数据传到前端了，但drawchart函数没执行，核心原因出在你的<script>标签写法上——你不能在同一个<script>标签里同时用th:src引入外部JS文件，又写内联的JavaScript代码。当浏览器看到带src属性的<script>标签时，会优先去加载外部的JS文件，完全忽略标签内部的代码，这就导致你那行drawchart(xAxisData, yAxisData)根本没机会执行！

下面给你具体的修改步骤和修正后的代码：

1. 拆分script标签 #

把引入外部JS和执行绘图逻辑的代码拆成两个独立的<script>标签：

• 第一个标签专门加载你的drawChart.js文件
• 第二个标签用th:inline="javascript"处理后端数据并调用绘图函数

2. 修正head里的错误引用 #

另外，你在<head>里用<link>标签引入JS文件是错误的——<link>只能用来加载CSS、图标这类资源，JS文件必须用<script>标签引入。而且其实不需要在head里提前引入，把JS放在body末尾（Chart.js之后）更好，能避免DOM还没加载完就执行JS的问题。

修正后的完整HTML代码 #

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/test.css}" rel="stylesheet" />
</head>
<body>
<h2>Donkey</h2>
<p>punch</p>
<canvas id="ChartDemo"></canvas>

<!-- 先加载Chart.js依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<!-- 再加载自定义的绘图JS文件 -->
<script type="text/javascript" th:src="@{/js/drawChart.js}"></script>
<!-- 最后处理后端数据并调用绘图函数 -->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var xAxisData = /*[[ ${label} ]]*/[];
var yAxisData = /*[[ ${point} ]]*/[];
drawchart(xAxisData, yAxisData);
/*]]>*/
</script>
</body>
</html>

额外的小提示 #

• 可以给绘图逻辑加个DOM加载完成的判断，确保canvas元素已经存在再执行代码，避免意外问题：

document.addEventListener('DOMContentLoaded', function() {
    var xAxisData = /*[[ ${label} ]]*/[];
    var yAxisData = /*[[ ${point} ]]*/[];
    drawchart(xAxisData, yAxisData);
});

• 检查下你后端的数组长度：label有9个元素，但point只有8个，Chart.js可能会因为数据不匹配抛出警告，最好保持两个数组长度一致哦~

内容的提问来源于stack exchange，提问作者DerKerl