使用Chart.js实现的HTML环形图表无法显示问题求助

解决方案 #

核心问题是接口返回的数据格式和代码处理不匹配：
当请求/javatopia/api/lvParticipationPerModule.php?moduleId=${moduleId}时，接口返回的是包含所有模块的数组，但代码里直接尝试取data.completed和data.not_completed——数组本身没有这些属性，导致Chart.js拿到的是undefined，无法渲染图表。

修改fetchModuleCompletionData函数，根据传入的moduleId从返回的数组中筛选出对应模块的数据：

function fetchModuleCompletionData(moduleId) {
  moduleId = parseInt(moduleId);
  console.log('Fetching Module Completion Data for Module ID:', moduleId);

  fetch(`/javatopia/api/lvParticipationPerModule.php?moduleId=${moduleId}`)
    .then(response => response.json())
    .then(data => {
      console.log('Module Completion Data:', data);
      // 关键修改：根据moduleId从数组中找到对应模块
      const targetModule = data.find(item => parseInt(item.moduleId) === moduleId);
      if (!targetModule) {
        console.error('未找到对应模块数据');
        return;
      }

      const ctxDonut = document.getElementById('moduleCompletionChart').getContext('2d');
      let moduleCompletionChart = window.moduleCompletionChart;
      if (moduleCompletionChart && moduleCompletionChart.data) {
        moduleCompletionChart.data.labels = ['已完成', '未完成'];
        moduleCompletionChart.data.datasets[0].data = [targetModule.completed, targetModule.not_completed];
        moduleCompletionChart.update();
      } else {
        window.moduleCompletionChart = new Chart(ctxDonut, {
          type: 'doughnut',
          data: {
            labels: ['已完成', '未完成'],
            datasets: [{
              label: '模块完成情况',
              data: [targetModule.completed, targetModule.not_completed],
              backgroundColor: ['#36A2EB', '#FF6384'],
              borderWidth: 1
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        });
      }

      const canvas = document.getElementById('moduleCompletionChart');
      if (canvas) {
        canvas.style.display = 'block';
      }
    })
    .catch(error => {
      console.error('获取模块完成数据失败:', error);
    });
}

另外可以优化接口逻辑：当传入moduleId参数时，直接返回单个模块对象而非全量数组，减少前端数据处理的复杂度。

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