Angular 16中ApexCharts数据转换：API响应转堆叠柱状图格式

我在Angular 16项目中使用ApexCharts时，API返回的数据无法正确渲染，需要将原始数据转换为指定格式。

原始API返回数据 #

let data = [
  {
    tenantName: 'OBC+',
    labelName: 'Application',
    total: 85,
    postiveTotal: '21',
    negativeTotal: '64',
  },
  {
    tenantName: 'Discovery-world',
    labelName: 'Application',
    total: 194,
    postiveTotal: '119',
    negativeTotal: '75',
  },
  {
    tenantName: 'OBC+',
    labelName: 'Channels',
    total: 40,
    postiveTotal: '0',
    negativeTotal: '40',
  },
  {
    tenantName: 'Discovery-world',
    labelName: 'Channels',
    total: 59,
    postiveTotal: '0',
    negativeTotal: '59',
  },
];

需要转换的目标格式 #

this.stackedChartData = [
  {
    name: 'OBC Positive',
    group: 'OBC',
    data: [21, 0],
  },
  {
    name: 'OBC Negative',
    group: 'OBC',
    data: [64, 40],
  },
  {
    name: 'Discovery-world Positive',
    group: 'Discovery-world',
    data: [119, 0],
  },
  {
    name: 'Discovery-world Negative',
    group: 'Discovery-world',
    data: [75, 59],
  },
];

我尝试的代码（未得到正确结果） #

let labels = [...new Set(data.map((x: any) => x.labelName))];
let subLabels = data.reduce((acc, cur: any) => {
  if (
    acc.findIndex(
      (x) =>
        x.tenantName == cur.tenantName && x.labelName == cur.labelName
    ) == -1
  )
    acc.push({
      tenantName: cur.tenantName,
      labelName: cur.labelName,
      postiveTotal: cur.postiveTotal,
      negativeTotal: cur.negativeTotal,
    });

  return acc;
}, [] as { tenantName: string; labelName: string; postiveTotal: number; negativeTotal: number }[]);

console.log(subLabels);

正确转换方案 #

要实现目标格式，需要先按tenantName分组，再针对每个租户收集对应labelName顺序的positiveTotal和negativeTotal数值，最后整理成目标结构：

// 先获取所有唯一的labelName，确保data数组的顺序和原始数据中的label顺序一致
const labelOrder = [...new Set(data.map(item => item.labelName))];

// 按tenantName分组，收集每个租户的正负数据
const tenantGroups = data.reduce((groups, item) => {
  const tenant = item.tenantName.replace('+', ''); // 处理OBC+变成OBC
  if (!groups[tenant]) {
    groups[tenant] = {
      positive: [],
      negative: []
    };
  }
  // 把字符串转成数字，按labelOrder的顺序填充数据
  const labelIndex = labelOrder.indexOf(item.labelName);
  groups[tenant].positive[labelIndex] = parseInt(item.postiveTotal, 10);
  groups[tenant].negative[labelIndex] = parseInt(item.negativeTotal, 10);
  return groups;
}, {} as Record<string, { positive: number[], negative: number[] }>);

// 转换为目标格式的数组
const stackedChartData = Object.entries(tenantGroups).flatMap(([tenant, values]) => [
  {
    name: `${tenant} Positive`,
    group: tenant,
    data: values.positive
  },
  {
    name: `${tenant} Negative`,
    group: tenant,
    data: values.negative
  }
]);

console.log(stackedChartData);

代码说明： #

• labelOrder：获取所有唯一的labelName，保证后续data数组的顺序和原始数据中标签出现的顺序一致（比如先Application，再Channels）。
• tenantGroups：通过reduce按租户分组，为每个租户创建positive和negative数组，根据labelOrder的索引填充对应数值，同时将字符串类型的数值转为数字。
• flatMap：将分组后的对象转换为目标格式的数组，每个租户生成Positive和Negative两个条目。

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