如何正确转换服务端数据以适配ChartJS堆叠图表的渲染要求

数据转换实现（按指定的按位置聚合规则） #

直接使用以下JS代码即可完成转换，逻辑是先取所有stats数组的最大长度确定数据集数量，再按索引位置逐个收集对应数值和颜色：

const transformData = (groupedChartData) => {
  const maxStatsLength = Math.max(...groupedChartData.map(item => item.stats.length));
  const result = [];

  for (let idx = 0; idx < maxStatsLength; idx++) {
    const dataset = { data: [], backgroundColor: [] };
    groupedChartData.forEach(timeItem => {
      const stat = timeItem.stats[idx];
      if (stat) {
        dataset.data.push(stat.value);
        dataset.backgroundColor.push(stat.color);
      }
    });
    result.push(dataset);
  }
  return result;
}

// 调用后即可得到你需要的result结构
const result = transformData(groupedChartData);

更优渲染方案说明 #

你当前要求的按位置聚合的逻辑存在业务漏洞：如果不同duration下stats数组的同索引位置对应不同的reason分类，聚合出来的数据集没有实际业务含义，且stats顺序变化就会导致图表渲染错误。
更合理的方案是按reason（业务分类维度）聚合，不需要复杂转换，逻辑更健壮，也完全符合堆叠图的渲染规则：

1. 先收集所有出现过的reason作为独立数据集的分类
2. 每个数据集的长度和duration的数量保持一致，某段duration下没有对应reason的统计值时填0即可
3. 每个数据集对应固定的颜色（和reason绑定），不需要每个数值单独配置背景色
   这种方案下的转换代码更易维护，也不会因为服务端返回的stats顺序变化导致图表出错，是堆叠图渲染的标准实现逻辑。

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