问题描述
@H_502_0@我在Spring Boot / Thymeleaf Web应用程序中使用了条形图JS脚本。问题是通过Thymeleaf将数据库中的数据馈入以下JS变量:
var myBarChart = new Chart(ctx,{
type: 'bar',data: {
labels: ["Algotech","Provident","Play","Namirial","Avaya","Maintenance"],datasets: [{
label: "Godziny",backgroundColor: "#4e73df",hoverBackgroundColor: "#2e59d9",borderColor: "#4e73df",data: [77,50,43,2,7],}],},options: {
maintainAspectRatio: false,layout: {
padding: {
left: 10,right: 25,top: 25,bottom: 0
}
},scales: {
xAxes: [{
time: {
unit: 'month'
},gridLines: {
display: false,drawBorder: false
},ticks: {
maxTicksLimit: 6
},maxBarThickness: 25,yAxes: [{
ticks: {
min: 0,max: 200,maxTicksLimit: 5,padding: 10,// Include a dollar sign in the ticks
callback: function(value,index,values) {
return number_format(value) + 'g';
}
},gridLines: {
color: "rgb(234,236,244)",zeroLineColor: "rgb(234,drawBorder: false,borderDash: [2],zeroLineBorderDash: [2]
}
}],legend: {
display: false
},tooltips: {
titleMarginBottom: 10,titleFontColor: '#6e707e',titleFontSize: 14,backgroundColor: "rgb(255,255,255)",bodyFontColor: "#858796",borderColor: '#dddfeb',borderWidth: 1,xPadding: 15,yPadding: 15,displayColors: false,caretPadding: 10,callbacks: {
label: function(tooltipItem,chart) {
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ':' + number_format(tooltipItem.yLabel);
}
}
},}
});
@H_502_0@我需要更改此变量的几个部分,例如标签,datasets.data,yAxes.ticks.max等。我知道与Thymeleaf内联,但是我无法在这里使用它。我已正确放置脚本:
<script th:inline="javascript">
/*<![CDATA[*/
the body of the script here
/*]]>*/
</script>
@H_502_0@它仅在我尝试添加Thymeleaf变量之前有效。例如,以下更改会使Thymeleaf崩溃:
labels: [/*[[${projects[0].name}]]*/,
@H_502_0@这甚至还没有涵盖各种规模的项目清单的问题。是否可以使用Java,Thymeleaf或没有Thymeleaf做到这一点?我开始认为我将可以更轻松地使用PHP填充数据。
解决方法
好吧,尽管如此令人尴尬,我不得不求助于PHP。我已经将JS文件转换为PHP文件,并通过URL参数填充了所需的值,并且我这样称呼它:
<script src="http://myphpserversaddress/barchart.php?parameter=value"></script>
工作完美,我只用一个文件就可以处理各种图表。