我想做一个简单的图形为我的前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(此数据每天自动更改)
1条答案
按热度按时间hjqgdpho1#
这应该适合您:
我正在创建2个临时
List
s--courseNames
以及bookedTimes
(使用集合投影从原始List
),然后使用javascript内联将它们转换为javascript数组。然后,只需使用这些变量(而不是硬编码的值),它就会像你想要的那样创建图表。