JavaScript合并JSON对象实现Google堆叠柱状图数据整合

问题说明 #

要做Google堆叠柱状图展示2022、2023年数据，但数据分别来自MS SQL和MySQL，没法在上游合并，拿到两个JSON数组：

[["","Others","Restaurant","Retail"],["2022",3362,810,2110],["2023",0,0,0]]
[["","Event","Hotel","Other","Restaurant"],["2022",0,0,0,0],["2023",3802.5,2642,10955.44,7256]]

试过$.merge()和map()都达不到期望的合并格式——需要把所有类别整合，对应年份缺失的数据补0，最终要得到类似这样的结构：

[["","Event","Hotel","Restaurant","Retail","Others","Other"],["2022",0,0,810,2110,3362,0],["2023",3802.5,2642,7256,0,0,10955.44]]

解决方案：自定义逻辑实现 #

这种带表头的二维数组合并，需要对齐类别、补全缺失值，没有现成的通用工具函数，得自己写逻辑处理，下面是具体实现：

实现思路 #

• 把两个原始数组转换成「年份-类别-数值」的映射结构，方便快速取值
• 合并所有类别并去重，收集所有涉及的年份
• 遍历每个年份，针对每个合并后的类别，从映射中取对应值，没有的补0
• 组装成Google图表需要的二维数组格式

具体代码（JavaScript） #

// 原始数据源
const json1 = [["","Others","Restaurant","Retail"],["2022",3362,810,2110],["2023",0,0,0]];
const json2 = [["","Event","Hotel","Other","Restaurant"],["2022",0,0,0,0],["2023",3802.5,2642,10955.44,7256]];

// 合并多源图表数据的函数
function mergeChartDatasets(...datasets) {
    // 将单份数据集转换为类别列表和年份-类别映射
    const parseDataset = (dataset) => {
        const [header, ...yearRows] = dataset;
        const categories = header.slice(1);
        const yearMap = {};
        yearRows.forEach(row => {
            const [year, ...values] = row;
            yearMap[year] = {};
            categories.forEach((cat, index) => {
                yearMap[year][cat] = values[index];
            });
        });
        return { categories, yearMap };
    };

    // 解析所有输入数据集
    const parsedDatasets = datasets.map(parseDataset);
    
    // 合并所有类别（去重），可按需调整排序逻辑
    const allCategories = [...new Set(parsedDatasets.flatMap(d => d.categories))];
    // 合并所有年份（去重）
    const allYears = [...new Set(parsedDatasets.flatMap(d => Object.keys(d.yearMap)))];

    // 构建最终结果数组
    const result = [["", ...allCategories]];
    allYears.forEach(year => {
        const row = [year];
        allCategories.forEach(cat => {
            // 从所有数据集中找对应年份的类别值，找不到补0
            let value = 0;
            for (const ds of parsedDatasets) {
                if (ds.yearMap[year] && ds.yearMap[year][cat] !== undefined) {
                    value = ds.yearMap[year][cat];
                    break; // 若多个数据集有同一类别，取第一个出现的值，按需调整
                }
            }
            row.push(value);
        });
        result.push(row);
    });

    return result;
}

// 执行合并并输出结果
const mergedResult = mergeChartDatasets(json1, json2);
console.log(JSON.stringify(mergedResult));

关键说明 #

• 函数支持传入多个数据集（不止两个），后续新增数据源直接加参数即可
• 注意数据里的「Others」和「Other」是两个不同类别，如果是拼写错误，要先统一名称（比如把Other替换为Others），避免重复
• 可以根据需求调整类别和年份的排序逻辑，比如改成按字母排序或者原数据出现顺序排序

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