Firebase数据获取问题：提取登录用户数据生成表格及成功率饼图

一、修正用户数据获取逻辑 #

原代码遍历所有email节点再查找userId，逻辑冗余且易出错。正确做法是直接定位到当前登录用户的考勤节点，同时先校验用户登录状态，避免因currentUser未加载导致的uid获取失败。

修正后的数据获取与表格生成代码 #

// 先校验用户登录状态
const user = firebase.auth().currentUser;
if (!user) {
  alert("请先登录");
  return;
}

const userId = user.uid;
// 直接定位到当前用户的考勤记录节点
firebase.database().ref(`attendance/${userId}`).once("value")
  .then(snapshot => {
    const attendanceData = snapshot.val();
    const attendanceHistoryTable = document.getElementById("attendanceHistoryTable");
    attendanceHistoryTable.innerHTML = ""; // 清空表格原有内容

    let successCount = 0;
    let totalCount = 0;

    if (attendanceData) {
      // 遍历所有日期记录
      Object.entries(attendanceData).forEach(([date, record]) => {
        const status = record.status;
        // 生成表格行
        const tr = document.createElement("tr");
        tr.innerHTML = `<td>${date}</td><td>${status}</td>`;
        attendanceHistoryTable.appendChild(tr);

        // 同步统计成功/失败次数
        totalCount++;
        if (status === "成功") { // 请根据实际状态值调整，比如"success"
          successCount++;
        }
      });
    }

    // 生成饼图
    generatePieChart(successCount, totalCount);
  })
  .catch(error => {
    console.error("获取考勤数据失败:", error);
  });

二、生成成功率/失败率饼图 #

以下是原生Canvas实现的简单饼图，若需更复杂交互，可替换为Chart.js等可视化库。

饼图实现代码 #

function generatePieChart(successCount, totalCount) {
  if (totalCount === 0) {
    alert("暂无考勤数据");
    return;
  }

  const successRate = (successCount / totalCount) * 100;
  const failRate = 100 - successRate;

  const canvas = document.getElementById("pieChart");
  const ctx = canvas.getContext("2d");
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = Math.min(centerX, centerY) - 20;

  // 绘制成功区域（绿色）
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.arc(centerX, centerY, radius, 0, (Math.PI * 2) * (successRate / 100));
  ctx.closePath();
  ctx.fillStyle = "#4CAF50";
  ctx.fill();

  // 绘制失败区域（红色）
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.arc(centerX, centerY, radius, (Math.PI * 2) * (successRate / 100), Math.PI * 2);
  ctx.closePath();
  ctx.fillStyle = "#F44336";
  ctx.fill();

  // 添加百分比文本标注
  ctx.fillStyle = "#000";
  ctx.font = "16px Arial";
  ctx.textAlign = "center";
  ctx.fillText(`成功: ${successRate.toFixed(1)}%`, centerX, centerY - 10);
  ctx.fillText(`失败: ${failRate.toFixed(1)}%`, centerX, centerY + 10);
}

核心优化点 #

• 精准节点定位：直接通过attendance/${userId}获取当前用户数据，避免无效遍历，提升效率
• 登录状态校验：提前判断用户是否登录，防止未授权操作
• 数据同步统计：在生成表格的同时完成数据统计，减少重复遍历
• 兼容性处理：针对无数据的情况做友好提示

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