如何使用循环创建多个Chart.js环形图

1. 后端控制器代码（补充Student属性逻辑） #

假设Student类包含name（学生姓名）和percentage（对应百分比）属性，控制器中填充业务数据：

List<Student> listOfStudent = new ArrayList<>();
// 示例数据，实际从业务逻辑获取
listOfStudent.add(new Student("张三", 12));
listOfStudent.add(new Student("李四", 19));
listOfStudent.add(new Student("王五", 3));
listOfStudent.add(new Student("赵六", 17));
listOfStudent.add(new Student("孙七", 28));
listOfStudent.add(new Student("周八", 24));
listOfStudent.add(new Student("吴九", 7));
model.addAttribute("listOfStudent", listOfStudent);

2. 前端JSP代码（实现环形图+学生总数展示） #

方式一：单个环形图展示所有学生占比 #

通过JSTL循环构建标签和数据数组，初始化一次环形图，并在下方显示学生总数：

<!-- 环形图容器 -->
<canvas id="donutChart" width="400" height="400"></canvas>
<!-- 学生总数展示 -->
<div>学生总数：${listOfStudent.size()}</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 构建标签和数据数组
let labels = [];
let data = [];
<c:forEach var="student" items="${listOfStudent}">
    labels.push("${student.name}");
    data.push(${student.percentage});
</c:forEach>

// 初始化环形图
var ctx = document.getElementById("donutChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: labels,
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: data
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom',
      }
    }
  }
});
</script>

方式二：循环生成多个独立环形图（每个学生一个） #

如果需要为每个学生单独生成环形图（展示该学生百分比与剩余占比），循环创建独立容器并初始化图表：

<!-- 循环生成每个学生的环形图容器 -->
<c:forEach var="student" items="${listOfStudent}" varStatus="status">
    <div style="display: inline-block; margin: 20px;">
        <h4>${student.name}</h4>
        <canvas id="donutChart_${status.index}" width="200" height="200"></canvas>
    </div>
</c:forEach>
<!-- 学生总数展示 -->
<div style="margin-top: 20px;">学生总数：${listOfStudent.size()}</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
<c:forEach var="student" items="${listOfStudent}" varStatus="status">
    // 初始化单个学生的环形图
    var ctx = document.getElementById("donutChart_${status.index}").getContext('2d');
    new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ["${student.name}", "其他"],
        datasets: [{
          backgroundColor: ["#3498db", "#95a5a6"],
          data: [${student.percentage}, ${100 - student.percentage}]
        }]
      },
      options: {
        responsive: true
      }
    });
</c:forEach>
</script>

关键注意事项 #

• 必须引入Chart.js库才能正常渲染环形图
• 方式一中的背景色数组若学生数量超过7个，需补充更多颜色或实现动态颜色生成逻辑
• 方式二中通过varStatus="status"获取循环索引，保证每个canvas的ID唯一，避免DOM冲突
• 学生总数直接通过${listOfStudent.size()}获取，无需额外处理

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