Javascript 将Thymeleaf与Google图表和Java地图一起使用

我在JavaScript中创建的Thymeleaf块切断了结尾；，并在JSON中的位置2处抛出一个

Uncaught（in promise）SyntaxError:Unexpected token'

除了数据变量之外，代码的解析方式也应该如此。解析代码：

function drawChart() {

    var jsonData = "{ 'cols': [" +
        "{'id':'','label':'Expense','pattern':'','type':'string'}" +
        "{'id':'','label':'Amount','pattern':'','type':'number'}]," +
        "'rows': [";

    var data = {'Expense1': 25.0, 'Expense2': 20.0, 'Expense3': 40.0};
    var end = "]}";
    var res = jsonData.concat(data);
    var res = res.concat(end);

    var json = JSON.parse(res);

    var data = new google.visualization.DataTable(json);

    var options = {
        title: 'Data test',
        pieHole: 0.4
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
}

前导码：

<script type="text/javascript" th:inline="javascript">
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var jsonData = "{ 'cols': [" +
            "{'id':'','label':'Expense','pattern':'','type':'string'}" +
            "{'id':'','label':'Amount','pattern':'','type':'number'}]," +
            "'rows': [";

        var data = /*[[${chart.DataPoints}]]*/;
        var end = "]}";
        var res = jsonData.concat(data);
        var res = res.concat(end);

        var json = JSON.parse(res);

        var data = new google.visualization.DataTable(json);

        var options = {
            title: /*[[${chart.title}]]*/'',
            pieHole: 0.4
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    }
</script>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var jsonData=“{'cols'：[”+
{'id'：''，'label'：'Expense'，'pattern'：''，'type'：'string'}+
“{'id'：''，'label'：'Amount'，'pattern'：''，'type'：'number'}]，”+
“‘行’：[”；
var data=/*[${chart.DataPoints}]]*/；
var end=“]}”；
var res=jsonData.concat（数据）；
var res=res.concat（结束）；
var json=json.parse（res）；
var data=new google.visualization.DataTable（json）；
变量选项={
标题：/*[${chart.title}]*/''，
孔：0.4
};
var chart=new google.visualization.PieChart（document.getElementById（'donutchart'）；
图表绘制（数据、选项）；
}

数据变量要么像现在一样，要么当用“”括起来时，它会切断结束分号。如何让JavaScript的Thymeleaf将数据变量转换为字符串（同时维护它所包含的“”）
这对您有用吗？我认为您不需要首先将数据构建为JSON字符串，只需将其创建为JavaScript对象即可：

<script type="text/javascript" th:inline="javascript">
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var json = {
            'cols': [
                {'id':'', 'label': 'Expense', 'pattern': '', 'type': 'string'},
                {'id':'', 'label': 'Amount', 'pattern': '', 'type': 'number'}
            ],
            rows: []
        };

        var data = /*[[${chart.DataPoints}]]*/ [];
        var rows = [];
        Object.keys(data).forEach(function(key) {
            rows.push({
                "c": [
                    {"v": key,       "f": null},
                    {"v": data[key], "f": null}
                ]
            });
        });

        json['rows'] = rows;

        var data = new google.visualization.DataTable(json);
        var title = /*[[${chart.title}]]*/ '';
        var options = {
            title: title,
            pieHole: 0.4
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    }
</script>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var json={
“科尔斯”：[
{'id'：''，'label'：'Expense'，'pattern'：''，'type'：'string'}，
{'id'：''，'label'：'Amount'，'pattern'：''，'type'：'number'}
],
行：[]
};
var data=/*[[${chart.DataPoints}]*/[]；
var行=[]；
Object.keys（数据）.forEach（函数（键）{
推({
“c”：[
{“v”：key，“f”：null}，
{“v”：数据[键]，“f”：null}
]
});
});
json['rows']=行；
var data=new google.visualization.DataTable（json）；
var title=/*[${chart.title}]*/''；
变量选项={
标题:标题,，
孔：0.4
};
var chart=new google.visualization.PieChart（document.getElementById（'donutchart'）；
图表绘制（数据、选项）；
}


编辑：您可以根据需要格式化数据。。。用JavaScript做这件事非常简单
您正在使用thymeleaf 3吗？打印并验证从{chart.DataPoints}返回的JOSN。不幸的是，我正在使用thymeleaf 2。/*[${chart.DataPoints}]]*/的输出是什么；{'Expense1'：25.0，'Expense2'：20.0，'Expense3'：40.0}您可以尝试var json=json.parse（res.replace（/\\\/g，”）吗；这确实显示了图表的标题，但在图形应该位于的位置显示了“无数据”，此时查看JSON。{“cols”：[{“id”：”，“标签”：“费用”，“模式”：”，“类型”：“字符串”}，{“id”：“标签”：“金额”，“模式”：“类型”：“数字”}]，“行”：{“费用1:25”，“费用2”：20，“费用3”：40}它确实输出了有效的JSON，但我认为“行”周围必须有方括号，我感觉它越来越接近了。我将JSON更改为硬编码JSON。有没有办法将/*[${chart.DataPoints}]]*/格式化为这样的内容：{“c”：[{“v”：“Expense1”，“f”：null}，{“v”：25，“f”：null}，{“c”：[{“v”：“v”：“Expense2”，“f”：null}，{“v”“：20，“f:null}]}，{”c:[{”v:“Expense3”，“f:null}，{”v:40，“f:null}]}？