如何解决如何将spring数据放入JS Json变量?
我在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);
}
}
},}
});
我需要更改此变量的几个部分,例如标签,datasets.data,yAxes.ticks.max等。我知道与Thymeleaf内联,但是我无法在这里使用它。我已正确放置脚本:
<script th:inline="javascript">
/*<![CDATA[*/
the body of the script here
/*]]>*/
</script>
它仅在我尝试添加Thymeleaf变量之前有效。例如,以下更改会使Thymeleaf崩溃:
labels: [/*[[${projects[0].name}]]*/,
这甚至还没有涵盖各种规模的项目清单的问题。是否可以使用Java,Thymeleaf或没有Thymeleaf做到这一点?我开始认为我将可以更轻松地使用PHP填充数据。
解决方法
好吧,尽管如此令人尴尬,我不得不求助于PHP。我已经将JS文件转换为PHP文件,并通过URL参数填充了所需的值,并且我这样称呼它:
<script src="http://myphpserversaddress/barchart.php?parameter=value"></script>
工作完美,我只用一个文件就可以处理各种图表。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。