如何将spring数据放入JS Json变量?

问题描述

@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>

工作完美,我只用一个文件就可以处理各种图表。