如何处理供Google Charts使用的JavaScript数组：合并重复日期条目

处理逻辑说明 #

• 以每行首元素（日期）为分组唯一标识，相同日期的后续数值列逐位累加，合并为单条日期条目
• 聚合过程保留原始数组的日期出现顺序，无需额外重排，输出结构可直接被Google Charts的arrayToDataTable接口识别，无兼容问题
• 不改动原始数据的维度数量，每一条输出条目固定保留「日期 + 3个数值列」的结构，匹配图表数据结构要求

可直接复用的JS实现 #

// 原始输入数组
const rawData = [
  ["04/21/2021", 405, 85, 30],
  ["04/18/2021", 350, 135, 30],
  ["04/16/2021", 335, 120, 30],
  ["04/15/2021", 420, 100, 30],
  ["04/15/2021", 405, 85, 30],
  ["04/15/2021", 350, 135, 30],
  ["04/14/2021", 350, 135, 30],
  ["04/14/2021", 405, 85, 30],
  ["04/14/2021", 405, 85, 30]
];

// 用Map做分组聚合，利用Map的键唯一性天然去重
const groupMap = new Map();
rawData.forEach(item => {
  const dateKey = item[0];
  // 首次出现的日期直接存入
  if (!groupMap.has(dateKey)) {
    groupMap.set(dateKey, [...item]);
    return;
  }
  // 重复日期逐位累加数值
  const targetRow = groupMap.get(dateKey);
  for (let col = 1; col < item.length; col++) {
    targetRow[col] += item[col];
  }
});

// 转换为最终可直接使用的二维数组
const finalData = Array.from(groupMap.values());

实际聚合输出结果 #

注：参考你给出的目标示例，04/15对应的第一列数值为累加笔误，实际逐列计算结果如下

[
  ["04/21/2021", 405, 85, 30],
  ["04/18/2021", 350, 135, 30],
  ["04/16/2021", 335, 120, 30],
  ["04/15/2021", 1175, 320, 90],
  ["04/14/2021", 1160, 305, 90]
]

Google Charts适配提示 #

• 直接将finalData传入google.visualization.arrayToDataTable()即可完成图表数据绑定，无需额外格式转换
• 若需将日期列识别为时间维度而非文本类型，可在数组最顶部插入表头行，结构为[{label: "日期", type: "date"}, {label: "系列1", type: "number"}, {label: "系列2", type: "number"}, {label: "系列3", type: "number"}]，后续行的日期字符串替换为new Date(原日期字符串)即可触发时间轴渲染

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