如何用Plotly基于Thymeleaf动态数据生成热门5门课程预约次数柱状图？

作为刚接触JavaScript的新手，你其实离成功只差一步——把Thymeleaf渲染的后端数据传递给Plotly就行！我给你整理了一套完整的实现方案，一步步来：

1. 页面结构准备 #

首先在HTML里添加图表的容器，同时可以保留你原来的表格（也可以根据需求去掉）：

<!-- 用于展示Plotly图表的容器 -->
<div id="courseChart"></div>

<!-- 你原来的表格（可选保留，用来同时展示列表数据） -->
<table>
  <thead>
    <tr>
      <th>课程名称</th>
      <th>预约次数</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="m : ${topCourses}">
      <td th:text="${m.coursName}"></td>
      <td th:text="${m.bookedTimes}"></td>
    </tr>
  </tbody>
</table>

2. 将Thymeleaf数据转为JavaScript数组 #

我们需要把后端传过来的topCourses列表，拆分成Plotly需要的x轴（课程名称）和y轴（预约次数）数组。用Thymeleaf的内联表达式和遍历就能轻松实现：

<script>
// 生成课程名称数组：遍历topCourses，把每个课程名称转成字符串存入数组
const courseNames = [
  <th:block th:each="course : ${topCourses}">
    "[[${course.coursName}]]",
  </th:block>
];

// 生成预约次数数组：遍历topCourses，把每个预约次数存入数组
const bookedCounts = [
  <th:block th:each="course : ${topCourses}">
    [[${course.bookedTimes}]],
  </th:block>
];

// 处理数组末尾多余的逗号（可选，避免严格模式下的语法错误）
const cleanCourseNames = courseNames.filter(item => item !== '');
const cleanBookedCounts = bookedCounts.filter(item => item !== '');
</script>

这里的[[${...}]]是Thymeleaf的安全内联表达式，会自动转义特殊字符，避免XSS风险；最后过滤数组是为了处理遍历后可能出现的末尾多余逗号问题。

3. 用Plotly渲染柱状图 #

现在就可以用整理好的数组构建Plotly数据，然后渲染图表了：

<script>
// 构建Plotly的数据结构
const data = [{
  x: cleanCourseNames,
  y: cleanBookedCounts,
  type: 'bar',
  marker: {
    color: '#2E8B57' // 自定义柱子颜色，可选
  }
}];

// 配置图表布局（让展示更清晰）
const layout = {
  title: 'TOP5热门课程预约次数',
  xaxis: { 
    title: '课程名称',
    tickangle: -45 // 让课程名称倾斜显示，避免重叠
  },
  yaxis: { 
    title: '预约次数',
    rangemode: 'tozero' // 强制y轴从0开始，数据对比更直观
  },
  margin: { t: 50, b: 80 } // 调整顶部和底部边距，避免标题/坐标轴被截断
};

// 渲染图表到指定容器
Plotly.newPlot('courseChart', data, layout);
</script>

注意事项 #

• 确保你已经在页面中引入了Plotly的JavaScript文件，否则图表无法渲染。
• 如果你的topCourses可能为空，可以加个判断，比如if (cleanCourseNames.length > 0)再渲染图表，避免空数据报错。

内容的提问来源于stack exchange，提问作者Shayimerdan