Apex 堆叠图表栏未显示在正确的 x 轴中

Question

我在 Angular 16 应用程序中使用 Apex 堆叠条形图。这里我在 x 轴上有 4 个类别，并且条形图没有出现在正确的 x 轴标签中。

我的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: 'OBC+',
        labelName: 'Wifi',
        total: 1,
        postiveTotal: '1',
        negativeTotal: '1',
      },
      {
        tenantName: 'Discovery-world',
        labelName: 'Channels',
        total: 59,
        postiveTotal: '0',
        negativeTotal: '-59',
      },
      {
        tenantName: 'Vidocon',
        labelName: 'Test',
        total: 30,
        postiveTotal: '10',
        negativeTotal: '-20',
      },
    ];

请检查上图。此处的 API 响应

tenantName: 'Vidocon'

，系列数据未出现在正确的 x 轴标签中。

它应该显示在“测试”x 轴标签中，但它显示在“应用程序”x 轴标签中。

示例代码

Answer 1

对于每个条形，

data

数组应包含大小基于您的 x 轴类别的值。

1. 使用

   positiveTotal

   和

   negativeTotal

   字段将数据拆分为两个不同的对象。

2. 获取

   categoryGroups

   ，它是来自

   name

   的

   newData

   值数组。示例：“OBC+ 正面”、“OBC+ 负面”、“Discovery-world 正面”等

3. 通过迭代

   subLabels

   数组形成

   categoryGroups

   数组，并根据上述概念与

   data

   形成对象。

let newData = data
  .map((x) => [
    {
      labelName: x.labelName,
      group: x.tenantName,
      name: x.tenantName + ' Positive',
      value: x.postiveTotal,
    },
    {
      labelName: x.labelName,
      group: x.tenantName,
      name: x.tenantName + ' Negative',
      value: x.negativeTotal,
    },
  ])
  .reduce((acc, cur) => {
    acc.push(cur[0]);
    acc.push(cur[1]);

    return acc;
  }, []);


let labels = [...new Set(data.map((x: any) => x.labelName))];
let categoryGroups = [...new Set(newData.map((x) => x.name))];

let subLabels = categoryGroups.map((category) => {
  return {
    group: newData.find(x => x.name == category).group,
    name: category,
    data: labels.map(
      (label) =>
        newData.find((z) => z.name == category && z.labelName == label)
          ?.value ?? 0
    ),
  };
});

演示@StackBlitz