如何使用这个简单的 Plotly？答案

【问题标题】：How to use this simple Plotly?如何使用这个简单的 Plotly？
【发布时间】：2020-06-09 10:20:36
【问题描述】：

我想为我的前 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 的一个例子。

如何在 x 上设置我的 5 门课程名称，在 y 上设置预订时间？（这个数据每天都会自动变化）

【问题讨论】：

标签： javascript html spring-boot thymeleaf plotly

【解决方案1】：

这应该适合你：

<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 个临时 Lists -- courseNames 和 bookedTimes（使用 collection projection 从原始 List 创建它们），然后使用 JavaScript inlining 将它们转换为 JavaScript 数组.然后，只需使用这些变量（而不是硬编码值），它就会按照您的需要创建图表。

【讨论】：

非常感谢！有用！学到了新东西！