ChartJs 如何使用循环创建圆环图

Question

我正在尝试使用 for 循环创建一个圆环图，以便我可以生成多个圆环图。场景是，我将学生列表（列表）发送到前端，我的目标是使用学生的姓名及其各自的百分比创建一个圆环图。

我没有确切的代码，但这是一个基本轮廓：

在我的控制器中：

List<Student> listOfStudent = new ArrayList<>();
model.addAttribute("listOfStudent", listOfStudent);

在 JSP 中：

<c:forEach var="student" items="${listOfStudent}">

var ctx = document.getElementById("donutChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["studname1", "studname2", "studname3", "studname4", "studname5", "studname6", "studname7"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [12, 19, 3, 17, 28, 24, 7]
    }]
  }
});

标签中的值应该是学生的姓名，甜甜圈中应该是学生百分比，甜甜圈下面应该是学生总数。

随附参考图片以供澄清。

Answer 1

您需要将学生列表中的数据解析到图表中。所以你需要相应地替换标签和数据。