如何使用这个简单的脚本？

jobtbby3 于 2021-07-26 发布在 Java

关注(0)|答案(1)|浏览(270)

我想做一个简单的图形为我的前5名课程的名称和预定时间。
每个数据都基于不同的情况。
我的html站点代码：

<tr th:each="m : ${topCourses }">      
                <td th:text="${m.coursName}"></td>  
                <td th:text="${m.bookedTimes}"></td>
            </tr>

我发现了这段有情节的代码，我对使用javascript还很陌生。

var data = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot('myDiv', data);

这是plotly的一个例子。
如何将我的5个课程名称设置为x，并将时间设置为y(此数据每天自动更改）

JavaScript Html spring-boot thymeleaf plotly

来源：https://stackoverflow.com/questions/62280315/how-to-use-this-simple-plotly

1条答案

按热度按时间

hjqgdpho1#

这应该适合您：

<script th:inline="javascript" th:with="courseNames=${topCourses.![courseName]},bookedTimes=${topCourses.![bookedTimes]}">
  var courseNames = /*[[${courseNames}]]*/ [];
  var bookedTimes = /*[[${bookedTimes}]]*/ [];

  var data = [{
    x: courseNames,
    y: bookedTimes,
    type: 'bar'
  }];

  Plotly.newPlot('myDiv', data);
</script>

我正在创建2个临时 List s-- courseNames 以及 bookedTimes （使用集合投影从原始 List )，然后使用javascript内联将它们转换为javascript数组。然后，只需使用这些变量（而不是硬编码的值），它就会像你想要的那样创建图表。

赞(0）回复(0）举报 2021-07-26

我来回答

如何使用这个简单的脚本？

1条答案

相关问题

热门标签

最新问答