如何用Moment和Lodash为周柱状图补全缺失日期的空值

问题背景 #

我需要绘制周数据柱状图，使用moment和lodash的groupBy按星期对actionHistory数据分组后，结果仅包含有数据的星期，希望补全一周所有7天，缺失日期的value设为0。

现有代码：

const actionHistory = [
    {
      "c_code": "FIELD_VISIT",
      "amtp_actionTaken": "call",
      "amtp_takenOn": "2023-01-13T18:28:12.850Z"
    },
    {
      "c_code": "FIELD_VISIT",
      "amtp_actionTaken": "call",
      "amtp_takenOn": "2023-01-11T18:28:12.850Z"
    }
  ];
const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const month = groupBy(actionHistory, (dt) => moment(dt?.amtp_takenOn).days());
const result = map(month, (el, i) => ({ value: el?.length, label: weekdays[i - 1], frontColor: '#177AD5' });

当前输出（仅包含有数据的星期）：

[{"value":1,"label":"Tue","frontColor":"#177AD5"},{"value":1,"label":"Thu","frontColor":"#177AD5"}]

期望输出（补全所有星期，缺失项value为0）：

[{"value":0,"label":"Sun","frontColor":"#177AD5"}, 
 {"value":0,"label":"Mon","frontColor":"#177AD5"}, 
 {"value":1,"label":"Tue","frontColor":"#177AD5"}, 
 {"value":1,"label":"Wed","frontColor":"#177AD5"}, 
 {"value":1,"label":"Thu","frontColor":"#177AD5"}, 
 {"value":0,"label":"Fri","frontColor":"#177AD5"},
 {"value":0,"label":"Sat","frontColor":"#177AD5"}]

解决方案 #

核心思路是基于完整的星期列表（weekdays）遍历生成结果，而非直接遍历分组后的不完整结果。具体实现：

const actionHistory = [
    {
      "c_code": "FIELD_VISIT",
      "amtp_actionTaken": "call",
      "amtp_takenOn": "2023-01-13T18:28:12.850Z"
    },
    {
      "c_code": "FIELD_VISIT",
      "amtp_actionTaken": "call",
      "amtp_takenOn": "2023-01-11T18:28:12.850Z"
    }
  ];
const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
// 按星期几数字（0=周日，6=周六）分组数据
const groupedByDay = _.groupBy(actionHistory, (dt) => moment(dt?.amtp_takenOn).days());
// 遍历完整星期列表，补全缺失项
const result = weekdays.map((label, dayIndex) => ({
  value: groupedByDay[dayIndex]?.length || 0,
  label,
  frontColor: '#177AD5'
}));

console.log(result);

代码说明 #

• moment(dt?.amtp_takenOn).days()返回0到6的数字（对应周日到周六），和weekdays数组索引一一对应，修正了原代码中i-1的索引错误。
• 通过weekdays.map强制遍历所有7天，确保结果包含完整的星期项。
• 用groupedByDay[dayIndex]?.length || 0处理缺失数据：该星期有数据则取数组长度，无数据则设为0。

输出结果 #

运行后将生成包含一周所有7天的数组，缺失日期的value自动设为0，符合柱状图的完整数据需求。

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