Apex堆叠柱状图在Angular 16中X轴标签匹配异常

• 对齐X轴分类与数据系列的索引对应关系
  Apex Charts堆叠柱状图要求每个数据系列的数组长度必须和X轴categories数组长度完全一致，且索引位置严格对应分类。如果你的X轴categories是['分类1', 'Application', 'Test', '分类4']，那Vidocon的系列数据数组里，仅Test对应的索引位置（比如第3位，索引为2）填对应数值，其余无数据的分类位置填0，示例：

{
  name: 'Vidocon',
  data: [0, 0, 25, 0]
}

• 修正数据转换逻辑，避免错位
  排查API数据转图表数据的代码，确保每个租户的数值是按categories的顺序填充，而非API返回顺序直接赋值。可以用映射函数匹配分类名称与索引：

const xCategories = ['分类1', 'Application', 'Test', '分类4'];
const chartSeries = apiResponseData.map(tenant => {
  const mappedData = xCategories.map(category => tenant.categoryValues[category] || 0);
  return { name: tenant.tenantName, data: mappedData };
});

• 确认堆叠配置正确性
  检查图表plotOptions的堆叠设置，避免配置错误导致显示异常：

plotOptions: {
  bar: {
    stacked: true,
    horizontal: false
  }
}

• 调试验证数据匹配结果
  在组件中打印最终生成的chartSeries和xaxis.categories，确认Vidocon的data数组中，Test对应位置数值正确，Application位置为0，确保索引完全对齐。

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