Я сейчас пытаюсь получить Chart.js во внешнем файле, работающем с Thymeleaf.Я проверял бесчисленные внешние форумы, но не мог найти ответ.Закрытие того, что я смог найти, это следующий внешний файл javascript Thymeleaf разделяет атрибуты модуля с html-файлом
, но мне все еще не удалось это сделать.
Вот мой контроллер
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class ChartController {
@RequestMapping("/ExternalChart")
public String hello(Model model) {
String label[] = {"a","b","c","d","e","f","g","adasda","adasda2"};
int point[] = {5,3,7,1,8,3,4,50};
model.addAttribute("label",label);
model.addAttribute("point",point);
return "ExternalChart";
}
}
html-файл находится в src / main / resources / templates /
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link href="../static/css/Layout.css" th:href="@{/css/test.css}"
rel="stylesheet" />
<link href="../static/js/drawChart.js" th:href="@{/js/drawChart.js}"
rel="javascript" />
</head>
<body>
<h2>Donkey</h2>
<p>punch</p>
<canvas id="ChartDemo"></canvas>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script type="text/javascript" th:inline="javascript"
th:src="@{/js/drawChart.js}">
/*<![CDATA[*/
var xAxisData = /*[[ ${label} ]]*/[];
var yAxisData = /*[[ ${point} ]]*/[];
drawchart(xAxisData, yAxisData);
/*]]>*/
</script>
</body>
</html>
Мой javascript.он находится в src / main / resources / static / js
function drawchart(xAxisData, yAxisData) {
var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
type : 'line',
data : {
labels : xAxisData,
datasets : [ {
label : "Chart-1",
borderColor : 'rgb(255, 0, 0)',
lineTension : 0,
fill : false,
data : yAxisData,
}, ]
},
options : {
responsive : true,
}
});
}
Что я заметил, так это то, что атрибуты xAxisData и yAxisData получают значения, но это показывает, что drawChart (xAxisData, yAxisData) не делает 'в браузере его не запустят.
Я предполагаю, что совершаю какую-то глупую ошибку, и вероятность того, что я найду ее в одиночку, близка к нулю.Спасибо любому, кто даже пытается мне помочь. BR HK
ps Я действительно новичок с JS