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