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

jobtbby3  于 2021-07-26  发布在  Java
关注(0)|答案(1)|浏览(268)

我想做一个简单的图形为我的前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(此数据每天自动更改)

hjqgdpho

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数组。然后,只需使用这些变量(而不是硬编码的值),它就会像你想要的那样创建图表。

相关问题