Apex Chart柱形图排序异常 仅首柱排序正确问题求解

基础背景 #

• 业务场景：现有数百个统计项，每个统计项每日会多次产生记录，基于ApexCharts实现堆叠柱形图可视化
• 需求规则：
  • 仅展示出现频率不低于MIN.PERCENTAGE阈值的高频统计项
  • 占比低于MIN.PERCENTAGE阈值的低频项计数值合并，统一命名为Others展示
• 当前字段映射配置：
  • SERIES NAME: ITEM
  • LABEL: DATE
  • VALUE: COUNT

异常现象 #

• 2022-07-11对应的首根柱体数据排序完全正常
• 其余日期柱体中，未在2022-07-11出现的新增项始终固定显示在柱体最顶部，排序失效
• 整体排序规则始终沿用首个柱体的序列顺序，未按SQL查询结果排序

当前使用的查询SQL #

select   date
        , item
        , count
        , rank
  from source 
 where OK is not null    -- ok means percentage >= P10_PERCENT
union all
select  date
        , 'others'
        , sum(count)
        , 999 
  from source 
 where ok is null  -- sum all items with percentage < P10_PERCENT
 group by date
 order by 1 , 4 desc 

根因分析 #

1. 仅首根柱体排序正常的原因 #

ApexCharts堆叠柱形图的序列渲染顺序是全局唯一的，不会为单个x轴分类（即单日柱体）单独维护排序规则。图表初始化渲染时，会读取第一个x轴分类下返回的所有序列名，按读取顺序生成全局序列渲染栈，后续所有柱体都严格沿用这个全局栈的顺序渲染，不会根据单柱数据重新排序，因此只有首根柱体的顺序和SQL返回结果一致。

2. 新增项始终固定在柱体顶部的原因 #

当图表解析后续日期的数据时，如果遇到首根柱体不存在的新序列名，默认会将该新序列直接追加到全局渲染栈的最顶端位置，后续所有柱体的该序列都会固定在顶部渲染，完全不会参考SQL返回的rank字段调整位置。

修复方案 #

ApexCharts原生不支持单柱独立排序，要实现所有柱体按SQL返回的rank规则统一排序，需要从数据层和配置层同时改造：

第一步：改造SQL，生成全局固定顺序的全量数据集 #

原SQL按日期分组排序，会出现跨日期新增序列的问题，需要先计算全周期高频项的全局排序权重，再补全所有日期下的序列值，从数据层面避免动态新增序列：

-- 计算所有高频项的全局排序权重，保证全周期排序逻辑统一
with high_freq_items as (
  select 
    item,
    avg(percentage) as total_weight
  from source
  where OK is not null
  group by item
),
-- 生成所有日期+所有序列的全量笛卡尔积，避免跨日期出现新序列
all_date_series as (
  select distinct d.date, h.item
  from (select distinct date from source) d
  cross join high_freq_items h
  union all
  select distinct date, 'others' as item from source
)
-- 关联聚合数值，按全局固定规则排序
select 
  a.date,
  a.item,
  coalesce(s.count, 0) as count,
  case when a.item = 'others' then 999 else h.total_weight end as rank
from all_date_series a
left join source s 
  on a.date = s.date and a.item = s.item
left join high_freq_items h 
  on a.item = h.item
order by a.date, rank desc

第二步：调整ApexCharts配置，强制固定序列顺序 #

在图表初始化时提前传入固定顺序的全量序列列表，禁用所有自动排序逻辑：

// 提前从SQL结果中提取：按rank降序去重的item列表，作为全局固定序列顺序
const fixedSeriesOrder = Array.from(new Set(sqlResult.map(row => row.item)));
// 将数据转换为ApexCharts要求的series格式，每个序列对应固定item
const chartSeries = fixedSeriesOrder.map(itemName => {
  return {
    name: itemName,
    data: sqlResult.filter(row => row.item === itemName).map(row => row.count)
  }
});

const options = {
  chart: {
    type: 'bar',
    stacked: true,
  },
  series: chartSeries,
  xaxis: {
    // x轴categories按日期升序去重，和series内数据顺序一一对应
    categories: Array.from(new Set(sqlResult.map(row => row.date)))
  },
  plotOptions: {
    bar: {
      distributed: false
    }
  },
  legend: {
    position: 'top',
    // 禁用图例自动排序，强制使用固定序列顺序
    customSortItems: () => fixedSeriesOrder
  }
};

注意：禁止使用动态追加序列的方式异步加载数据，必须在图表初始化时就传入全量固定顺序的序列，单序列下缺失的日期值填0即可。

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