如何配置Power BI卡片：默认显示最新月份数值，选中时显示对应平均值

核心实现思路 #

• 初始化阶段：从所有月份的病假数据里挑出最新的月份，把它的人均病假天数渲染到顶部卡片
• 新数据加载时：重新筛选最新月份的数据，自动更新卡片内容
• 用户手动选月份时：直接把选中月份的数值同步到卡片

代码示例（以JavaScript前端场景为例） #

1. 初始化默认值 #

// 假设你的原始数据结构
const sickLeaveData = [
  { month: '2024-07', avgDays: 2.31 },
  { month: '2024-08', avgDays: 0.79 }
];

// 筛选最新月份数据的工具函数
function getLatestMonthData(data) {
  // 按月份降序排序，取第一个就是最新的
  return [...data].sort((a, b) => new Date(b.month) - new Date(a.month))[0];
}

// 初始化卡片内容
const initialLatestData = getLatestMonthData(sickLeaveData);
updateAvgCard(initialLatestData.avgDays);

2. 新月份数据加载后的自动更新 #

// 模拟新增9月数据的场景
function addNewMonthData(newData) {
  sickLeaveData.push(newData);
  const latestData = getLatestMonthData(sickLeaveData);
  updateAvgCard(latestData.avgDays);
}

// 调用示例：加载2024年9月的数据
addNewMonthData({ month: '2024-09', avgDays: 1.12 });

3. 监听用户的月份选择操作 #

// 给月份选择器绑定change事件
document.getElementById('month-picker').addEventListener('change', function(e) {
  const selectedMonth = e.target.value;
  const targetData = sickLeaveData.find(item => item.month === selectedMonth);
  if (targetData) {
    updateAvgCard(targetData.avgDays);
  }
});

// 通用的卡片更新函数
function updateAvgCard(value) {
  // 保留两位小数，和图表显示格式对齐
  document.getElementById('sick-leave-avg-card').textContent = value.toFixed(2);
}

注意事项 #

• 确保月份格式是标准可解析的（比如YYYY-MM），不然排序逻辑会出错
• 如果是后端返回数据，可以让后端直接返回按时间倒序排列的列表，前端直接取第一个，节省前端计算
• 卡片数值的小数位数要和图表保持一致，避免显示不一致的问题

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