React Native中转换对象数组生成Victory柱状图适配数据

实现思路 #

Victory分组柱状图要求每个数据系列（对应这里的每个项目阶段）传入独立的一维数据数组，单条数据需要包含x（横轴值，即月份）、y（纵轴值，即阶段天数）、系列标识（即阶段名）三个字段。转换逻辑分两步完成：

• 先将原始嵌套的「月份-阶段列表」结构拍平，生成单条数据点组成的一维数组
• 再按阶段名对拍平后的数据做分组聚合，最终输出符合要求的二维数组

完整转换代码 #

/**
 * 原始数据转Victory分组柱状图格式
 * @param {Array} rawData 接口返回的原始月份阶段数据
 * @returns {Array<Array>} 按阶段分组的数据集，每个子数组对应一组柱子的数据源
 */
const transformDataForVictory = (rawData) => {
  // 1. 拍平嵌套结构
  const flatDataList = [];
  rawData.forEach(monthRecord => {
    const currentMonth = monthRecord.date;
    monthRecord.phase.forEach(phaseRecord => {
      flatDataList.push({
        x: currentMonth,
        y: phaseRecord.days,
        type: phaseRecord.phaseName
      });
    });
  });

  // 2. 按阶段名分组
  const phaseGroupMap = new Map();
  flatDataList.forEach(dataPoint => {
    if (!phaseGroupMap.has(dataPoint.type)) {
      phaseGroupMap.set(dataPoint.type, []);
    }
    phaseGroupMap.get(dataPoint.type).push(dataPoint);
  });

  // 3. （可选）自定义阶段展示顺序，不需要可以直接返回 Array.from(phaseGroupMap.values())
  const customPhaseOrder = ['initiation', 'justification', 'planning', 'partner-selection', 'signing'];
  return customPhaseOrder
    .map(phaseName => phaseGroupMap.get(phaseName))
    .filter(Boolean); // 过滤掉不存在数据的阶段分组
};

// 调用示例
// const rawSourceData = [ 你的原始数据内容 ];
// const victoryBarData = transformDataForVictory(rawSourceData);

使用说明 #

• 转换得到的二维数组可以直接传入Victory柱状图组件使用，遍历时每个子数组对应一个VictoryBar组件的data属性，配置对应柱子颜色、组内偏移量即可实现分组柱状图效果
• 你提供的期望输出示例中最后一条记录的x值Juni属于笔误，上述代码默认保留原始数据中正确的Juni 2022值，如果需要自定义横轴文本格式，在拍平数据的步骤修改x字段的赋值规则即可
• 如果不需要固定阶段展示顺序，删掉代码中自定义排序的部分，直接返回Array.from(phaseGroupMap.values())即可

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