Angular 16中ApexCharts柱状图数据无法正常显示求助

在Angular 16应用中使用ApexCharts绘制柱状图时，API返回的数据结构无法直接匹配图表要求，导致渲染异常。

API原始返回数据 #

let data = [
  {
    tenantName: 'Station',
    labelName: 'aaaa',
    total: 7,
  },
  {
    tenantName: 'GERMANY',
    labelName: 'Application',
    total: 10,
  },
  {
    tenantName: 'GERMANY',
    labelName: 'Packages',
    total: 5,
  },
  {
    tenantName: 'Station',
    labelName: 'Security Features',
    total: 4,
  },
  {
    tenantName: 'Station',
    labelName: 'Setup and Configuration',
    total: 11,
  },
  {
    tenantName: 'Station',
    labelName: 'Speed',
    total: 9,
  },
  {
    tenantName: 'Station',
    labelName: 'WIFI signal Range',
    total: 21,
  },
];

需求说明 #

需要将数据转换为按labelName分类，每个标签对应不同tenantName的统计值格式，确保ApexCharts能识别系列（租户）和X轴标签，比如Station租户下aaaa标签对应数值7，GERMANY租户下Application标签对应数值10。

用户尝试的代码（未达预期） #

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

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

问题现象 #

图表渲染异常，部分租户的系列数据未正确与X轴标签对应，存在数据缺失或错位情况。

解决方案 #

我们需要将数据转换为ApexCharts要求的结构：X轴标签为所有labelName的集合，每个租户对应一个数据系列，系列中的数值按标签顺序匹配，没有对应数据的位置填0。

转换代码如下：

// 获取所有唯一的标签（X轴）
const labels = [...new Set(data.map(item => item.labelName))];
// 获取所有唯一的租户（系列）
const tenants = [...new Set(data.map(item => item.tenantName))];

// 转换为ApexCharts需要的系列格式
const chartSeries = tenants.map(tenant => {
  // 为每个租户生成对应标签的数值数组，无数据则填0
  const dataValues = labels.map(label => {
    const match = data.find(item => item.tenantName === tenant && item.labelName === label);
    return match ? match.total : 0;
  });
  
  return {
    name: tenant,
    data: dataValues
  };
});

代码说明 #

1. 提取所有唯一的labelName作为X轴标签，确保所有类别都被覆盖；
2. 提取所有唯一的tenantName作为图表的系列名称；
3. 遍历每个租户，针对每个标签查找对应的数据，存在则取total，不存在则填0，保证每个系列的数组长度与标签数量一致；
4. 最终生成的chartSeries可直接传入ApexCharts的series配置项，labels传入xaxis.categories配置项。

转换后，柱状图就能正确渲染每个租户在不同标签下的数值，缺失数据的位置会显示为0，避免图表错位。

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