Angular修改reduce函数实现按日期分组的柱状图数据格式

要生成适合「按日期分布各类型total」的柱状图数据，同时保持原代码的返回类型（Array<{label: string, data: number[]}>），你需要调整分组逻辑：不再直接按type收集所有total，而是先确定所有唯一日期并排序，再为每个type生成对应日期维度的数值数组。

修改后的代码 #

// 提取所有唯一日期并按时间排序，确保x轴顺序正确
const uniqueDates = [...new Set(this.lastFour.map(item => item.date))]
  .sort((a, b) => new Date(a).getTime() - new Date(b).getTime());

// 生成符合原结构的柱状图数据
const groupedByDateResult: any[] = Object.values(
  this.lastFour.reduce((obj, item) => {
    const type = item.type;
    // 初始化当前type的结构：label为type，data先按日期填充0
    if (!obj[type]) {
      obj[type] = {
        label: type,
        data: uniqueDates.map(() => 0)
      };
    }
    // 找到当前日期在日期数组中的索引，填充对应total值
    const dateIndex = uniqueDates.indexOf(item.date);
    if (dateIndex !== -1) {
      obj[type].data[dateIndex] = item.total;
    }
    return obj;
  }, {})
);

// 可选：格式化日期作为柱状图的x轴标签（根据需求调整格式）
const xAxisLabels = uniqueDates.map(date => new Date(date).toLocaleDateString());

代码说明 #

1. 日期处理：先提取所有不重复的日期并按时间排序，确保柱状图的x轴顺序是时间 chronological 的。
2. 分组逻辑：
   • 用reduce遍历数据，为每个type初始化包含label和data的结构，data数组初始长度与日期数组一致，默认填充0（处理某日期无该type数据的情况）。
   • 根据当前数据项的日期，找到其在日期数组中的索引，将对应位置的data值替换为当前的total。
3. 类型兼容：最后用Object.values()将reduce返回的对象转为数组，保持与原代码一致的返回类型。

柱状图适配 #

这个数据结构可以直接适配大多数前端图表库（如Chart.js、ECharts）：

• 将xAxisLabels作为x轴的标签。
• 将groupedByDateResult中的每个对象作为一个数据系列，label是系列名称，data是该系列对应每个日期的数值。

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