如何使用这个简单的Plotly？

Question

我想为我的前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);

这是密谋的例子。

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

Answer 1

这应该为您工作：