Spring 启动和 Thymeleaf：在 Z686155AF75A60A0F36E9D80C1F7ED 中迭代 map 条目

Question

Spring 启动 + Thymeleaf 在这里。 我有以下我一直在测试的static HTML 文件：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script>
        window.onload = function() {

            var foodChart = new CanvasJS.Chart("foodChart", {
                animationEnabled: true,
                title: {
                    text: "Foods"
                },
                data: [{
                    type: "pie",
                    startAngle: 240,
                    yValueFormatString: "##0.00\"%\"",
                    indexLabel: "{label} {y}",
                    dataPoints: [
                        {y: 95.0, label: "Pizza"},
                        {y: 5.0, label: "French Fries"}
                    ]
                }]
            });
            foodChart.render();
        }
    </script>
</head>
<body>

<div id="foodChart" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</body>
</html>

这将在浏览器中打开并且效果很好，饼图和所有。

但现在我想让饼图动态化，并且我希望服务器设置饼图中所有切片的值。 所以在服务器端（Java/Spring Boot），我有：

Map<String,BigDecimal> foodMap = new HashMap<>();
foodMap.put("Pizza", BigDecimal.valueOf(35.0)); // 35%
foodMap.put("French Fries", BigDecimal.valueOf(65.0)); // 65%

我试图弄清楚如何使用 Thymeleaf 标签修改 HTML 文件（模板），以便我可以使用这个foodMap来动态地驱动饼图的切片。 我想我需要类似的东西：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script>
        window.onload = function() {

            var foodChart = new CanvasJS.Chart("foodChart", {
                animationEnabled: true,
                title: {
                    text: "Foods"
                },
                data: [{
                    type: "pie",
                    startAngle: 240,
                    yValueFormatString: "##0.00\"%\"",
                    indexLabel: "{label} {y}",
                    dataPoints: [

                    <th:each="key: ${foodMap}">
                        {<th:text="y: ${value}, label: ${key}" />}
                    </th>

                    ]
                }]
            });
            foodChart.render();
        }
    </script>
</head>
<body>

<div id="foodChart" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</body>
</html>

但这不起作用，任何人都可以将我推向正确的方向吗？

Answer 1

为此，您应该利用 Thymeleaf 的JavaScript 内联。 例如，如果您这样做：

<script th:inline="javascript">
  let foodMap = /*[[${foodMap}]]*/ {};
</script>

它将 output：

<script>
  let foodMap = {"Pizza":35.0,"French Fries":65.0};
</script>

一旦你有了这些数据，就很容易将它转换成你想要的格式。 把它们放在一起：

<script th:inline="javascript">
  window.onload = function() {
    let foodMap = /*[[${foodMap}]]*/ {};

    let dataPoints = [];
    for (food in foodMap) {
      dataPoints.push({
        'label': food,
        'y': foodMap[food]
      });
    };

    var foodChart = new CanvasJS.Chart("foodChart", {
      animationEnabled: true,
      title: {text: "Foods"},
      data: [{
        type: "pie",
        startAngle: 240,
        yValueFormatString: "##0.00\"%\"",
        indexLabel: "{label} {y}",
        dataPoints: dataPoints
      }]
    });
    
    foodChart.render();
  }
</script>

Spring 启动和 Thymeleaf：在 Z686155AF75A60A0F36E9D80C1F7ED 中迭代 map 条目

问题描述

1 个解决方案

解决方案1
0 2022-09-21 20:46:01

Spring 启动和 Thymeleaf：在 Z686155AF75A60A0F36E9D80C1F7ED 中迭代 map 条目

问题描述

1 个解决方案

解决方案1 0 2022-09-21 20:46:01

解决方案1
0 2022-09-21 20:46:01