Thymeleaf Spring 中的谷歌图表。 Javascript循环答案

【问题标题】：Google Charts in Thymeleaf Spring . Javascript LoopThymeleaf Spring 中的谷歌图表。 Javascript循环
【发布时间】：2019-08-15 20:18:29
【问题描述】：

我需要代码方面的帮助。我想根据数组列表创建谷歌图表。我不知道java脚本，我有一个循环问题。我发布了我想要返回数据的代码。我想插入一个循环，而不是单次打印。这样您就不必输入例如/ * [[$ {FirstAirline}]] * / ....

我将从列表中返回 data.price 和 data.destination

正面：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <form action="#" th:action="@{/connect/historical}" th:object="${FlightDTO}" method="post">

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Airline', 'Price [[${Currency}]] '],
          [ /*[[${FirstAirline}]]*/, [[${FirstFlight}]]],
          [ /*[[${SecondAirline}]]*/,[[${SecondFlight}]]],
          [ /*[[${ThirdAirline}]]*/, [[${ThirdFlight}]]],
          [ /*[[${FourthAirline}]]*/, [[${FourthFlight}]]],
          [ /*[[${FifthAirline}]]*/, [[${FifthFlight}]]],

          [ /*[[${SixthAirline}]]*/, [[${SixthFlight}]]],
          [ /*[[${SeventhAirline}]]*/, [[${SeventhFlight}]]],
          [ /*[[${EighthAirline}]]*/, [[${EighthFlight}]]],
          [ /*[[${NinthAirline}]]*/, [[${NinthFlight}]]],
          [ /*[[${TenthAirline}]]*/, [[${TenthFlight}]]],


         [ "Average month price", /*[[${Average}]]*/]

        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'The cheapest cheapfly prices at  [[${Date}]] ',
            subtitle: 'from [[${Departure}]] to [[${Destination}]]' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
       /*]]>*/
    </script>
    </head>
<body>
<div id="top_x_div" style="width: 800px; height: 600px;"></div>
</body>
</html>

后端：

 @RequestMapping(value = "/chart", method = RequestMethod.GET)
    @AllowedForUsers
    public String chart(@Valid @ModelAttribute("FlightDTO") FlightDTO flightRequest,
                        BindingResult result, ModelMap model) {


        ArrayList<Historical> historicalList = historicalFlightRepository.findByUserName(CurrentUserName().getUsername());

        for (Historical his : historicalList) {
            if (his.getId() == null) {

                throw new HistoricalNotFoundException();

            }
        }
        // model.addAttribute("currency",historicalList.)
        model.addAttribute("average", service.averagePrice(historicalList));
        model.addAttribute("data", historicalList);


        return "historical/chart.html";
    }
}

【问题讨论】：

标签： javascript java spring thymeleaf

【解决方案1】：

你想错了。与其尝试遍历 Thymeleaf 中的数据，不如在将数据添加到模型之前为 JavaScript 库构建数据。例如，使用此模型属性：

model.addAttribute("data", new Object[][] {
    {"Airline",     "Price $"},
    {"Delta",       100},
    {"Southwest",   500},
    {"Jet Blue",    300},
    {"Canada Air",  300},
    {"Average month price", 300}
});

然后，在 JavaScript 中：

<script type="text/javascript" th:inline="javascript">
    var data = [[${data}]];
</script>

会输出这个：

<script type="text/javascript">
    var data = [["Airline","Price $"],["Delta",100],["Southwest",500],["Jet Blue",300],["Canada Air",300],["Average month price",300]];
</script>

【讨论】：

谢谢！但这是唯一的方法吗？它看起来不干净..你确定吗？我不能从数据列表前面循环吗？
你可以这样循环：Thymeleaf textual syntax。（但你真的不想这样做。）Thymeleaf 已经可以将你的 Java 对象转换为 JavaScript 数组，我猜你只需要找到适合你的格式。