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

Posted 2023-02-26

【中文标题】将 Thymeleaf 与 Google 图表和 Java 地图一起使用

【英文标题】：Using Thymeleaf with Google charts and Java Map

【发布时间】：2018-08-31 01:31:17

【问题描述】：

我在 javascript 中制作的 Thymeleaf 块切断了结尾；变量，并抛出一个Uncaught (in promise) SyntaxError: Unexpected token ' in JSON at position 2。

除了数据变量之外，代码确实会按应有的方式进行解析。解析代码：

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);

前 Thymeleaf 代码：

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

data var 要么就是现在的样子，要么用 "" 括起来，它会切断结束的分号。如何让 JavaScript 的 Thymeleaf 将数据 var 转换为字符串（同时保持它包含的 ''）？

【问题讨论】：

您使用的是百里香叶 3 吗？打印并验证从 chart.DataPoints

返回的 JOSN

不幸的是，我正在使用 thymeleaf 2。

/*[[$chart.DataPoints]]*/;的输出是什么

'Expense1':25.0,'Expense2':20.0,'Expense3':40.0

你可以试试 var json = JSON.parse(res.replace(/\\/g, ""));

【参考方案1】：

这对你有用吗？我认为您不需要先将数据构建为 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>

编辑：您可以随意格式化数据...在 JavaScript 中执行此操作非常简单。

【讨论】：

这会渲染图表的标题，但会在图表应显示的位置显示“无数据”，此时正在查看 JSON。

"cols":["id":"","label":"Expense","pattern":"","type":"string","id" :"","label":"Amount","pattern":"","type":"number"],"rows":"Expense1:25,"Expense2":20,"Expense3":40 它确实输出了有效的 JSON，但我认为“行”周围必须有方括号，我觉得它已经接近了。

我将 JSON 更改为硬编码 JSON。有没有办法将 /*[[$chart.DataPoints]]*/ 格式化为如下所示： "c":["v":"Expense1","f":null," v":25,"f":null], "c":["v":"Expense2","f":null,"v":20,"f":null] , "c":["v":"Expense3","f":null,"v":40,"f":null]?