如何动态生成billboard.js的columns数组配置？

问题背景 #

现有一段billboard.js代码，通过手动判断Term字段值（如label1、label2）构建对应数组，再配置到图表的xs和columns中。希望将此逻辑改为动态处理，无需预先指定Term值，自动适配任意数量的Term分组。

原代码问题 #

原代码硬编码了Term值，扩展性差，新增Term时需要手动修改代码。

动态处理思路 #

1. 使用对象存储分组数据：用一个对象管理每个Term对应的x轴数组和数值数组，避免手动声明多个变量。
2. 遍历数据自动分组：遍历返回的res.data，根据每个item的Term值自动将Index和Value追加到对应分组的数组中。
3. 动态生成xs和columns配置：从分组对象中提取数据，自动组装成billboard.js所需的格式。

修正后的动态代码 #

$.when(myfun(my_args))
.done(function(res){
    // 初始化分组存储对象，key为Term值，value包含x轴数组和数据数组
    const groups = {};

    res.data.forEach(item => {
        const term = item.Term;
        // 如果当前Term还没有分组，初始化对应的数组
        if (!groups[term]) {
            groups[term] = {
                x: [`${term}_x`],  // x轴数组的首元素是标识名
                data: [term]        // 数据数组的首元素是系列名
            };
        }
        // 追加当前item的Index和Value到对应分组
        groups[term].x.push(item.Index);
        groups[term].data.push(item.Value);
    });

    // 动态生成xs配置：{ "label1": "label1_x", "label2": "label2_x" }
    const xsConfig = {};
    // 动态生成columns数组：[label1_x数组, label1数据数组, label2_x数组, label2数据数组...]
    const columnsConfig = [];

    Object.keys(groups).forEach(term => {
        xsConfig[term] = `${term}_x`;
        columnsConfig.push(groups[term].x);
        columnsConfig.push(groups[term].data);
    });

    // 生成图表，修正原代码结构错误（axis应与data同级）
    const mychart = bb.generate({
        data: {
            type: "line",
            xs: xsConfig,
            columns: columnsConfig
        },
        axis: {
            x: {
                type: "timeseries",
                tick: {
                    format: "%Y-%m-%d"
                }
            }
        }
    });
});

关键说明 #

• 分组对象groups：自动为每个新出现的Term创建分组，无需提前知道Term的具体值。
• 动态配置生成：通过遍历groups对象，自动生成xs和columns，无论新增多少个Term都能适配。
• 修正原代码结构错误：原代码将axis写在data内部，不符合billboard.js配置规范，已调整为与data同级。

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