Highcharts堆叠条形图需求：最大值居底、最小值置顶（附示例链接）

要实现这个需求，核心是动态调整系列的堆叠顺序——Highcharts的条形图默认按系列定义的先后顺序堆叠，先声明的系列会被放在底部。所以我们需要针对每个类别（比如示例里的1月、2月、3月），比较该类别下各系列的数值，把数值大的系列调整到前面渲染，就能让它堆在底部。

具体实现步骤 #

1. 按类别对系列数值排序 #

先把每个类别下的所有系列数值拎出来，从大到小排序，记录每个类别对应的系列优先级（数值大的优先级高，要先渲染）。

2. 动态配置系列的stack属性 #

利用Highcharts的stack属性控制堆叠分组，给每个系列分配动态的stack值，确保同一类别下数值大的系列stack优先级更高，这样渲染时就会被放在底部。

完整代码示例 #

// 原始数据，和你的示例对应
const sourceData = {
  categories: ['1月', '2月', '3月'],
  series: [
    { name: 'base', data: [10, 20, 5] },
    { name: 'Sec', data: [30, 15, 25] }
  ]
};

// 第一步：为每个类别生成系列的排序（数值从大到小）
const categorySeriesOrder = sourceData.categories.map((_, catIdx) => {
  // 收集当前类别下所有系列的数值和原始索引
  const seriesWithValue = sourceData.series.map((series, idx) => ({
    idx,
    value: series.data[catIdx]
  }));
  // 按数值降序排序
  return seriesWithValue.sort((a, b) => b.value - a.value).map(item => item.idx);
});

// 第二步：调整系列的stack属性，让数值大的系列优先堆叠
const adjustedSeries = sourceData.series.map((series, seriesIdx) => ({
  ...series,
  // 为每个系列生成对应每个类别的stack标识，确保排序正确
  stack: categorySeriesOrder.map(order => order.indexOf(seriesIdx)).join('-')
}));

// 初始化图表
Highcharts.chart('container', {
  chart: { type: 'bar' },
  xAxis: { categories: sourceData.categories },
  yAxis: { title: { text: '数值' } },
  plotOptions: {
    bar: {
      stacking: 'normal',
      stackLabels: { enabled: true } // 可选，显示堆叠标签
    }
  },
  series: adjustedSeries
});

关键细节说明 #

• 这个方案支持任意数量的系列和类别，每个类别都会独立判断数值大小并调整堆叠顺序。
• 如果你的数据是动态加载的，只需要把数据替换成接口返回的内容，排序逻辑可以直接复用。
• 要是遇到堆叠顺序还是不对的情况，可以检查plotOptions.bar.series.order配置，确保它是默认的null（按系列定义顺序渲染）。

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