Highcharts混合图表可行性咨询：负堆叠柱图与含负值柱图组合

你的需求完全可以通过Highcharts的堆叠配置和系列分组来实现，核心思路是给需要堆叠的系列分配相同的stack组，同时让独立的含正负值系列使用单独的分组，这样就能在同一个类别下同时展示堆叠的正负柱形和独立的混合值柱形。

关键配置要点 #

• Stack分组：用stack属性将需要堆叠的系列归类，比如负值系列统一用stack: 'negative'，正值系列用stack: 'positive'，独立系列单独设置一个stack（比如stack: 'migration'）
• Stacking开关：对堆叠系列开启stacking: 'normal'，独立系列关闭堆叠（stacking: false）
• Column类型：统一设置图表类型为column，满足你把bar改为column的要求
• Y轴优化：保持y轴标签显示绝对值，让正负数值的阅读更直观

完整代码示例 #

// Age categories
var categories = [
 '0-4', '5-9', '10-14', '15-19', '20-24',
 '25-29', '30-34', '35-39', '40-44', '45-49',
 '50-54', '55-59', '60-64', '65-69', '70-74',
 '75-79', '80-84', '85-89', '90-94', '95-99', '100 + '
];

Highcharts.chart('container', {
 chart: { type: 'column' },
 title: { text: 'Combined Stacked Negative Columns with Mixed Value Columns' },
 xAxis: {
  categories: categories,
  labels: { step: 1 }
 },
 yAxis: {
  title: { text: 'Population Percentage' },
  labels: { formatter: function () { return Math.abs(this.value) + '%'; } }
 },
 plotOptions: {
  column: {
   grouping: true, // 同一类别下不同stack的柱子并排显示
   borderWidth: 0
  }
 },
 tooltip: {
  formatter: function () {
   return `<b>${this.series.name}, age ${this.point.category}</b><br/>` +
    `Value: ${Highcharts.numberFormat(Math.abs(this.point.y), 0)}%`;
  }
 },
 series: [
  // 堆叠的负值系列（男性城乡细分）
  {
   name: 'Male - Urban',
   data: [-1.1, -1.0, -1.2, -1.3, -1.4, -1.6, -1.7, -1.5, -1.6, -2.2, -2.3, -1.8, -1.6, -1.2, -1.3, -1.2, -0.6, -0.3, -0.1, -0.0, -0.0],
   stack: 'negative',
   stacking: 'normal',
   color: '#2f7ed8'
  },
  {
   name: 'Male - Rural',
   data: [-1.1, -1.2, -1.1, -1.2, -1.3, -1.5, -1.5, -1.5, -1.6, -2.1, -2.1, -1.8, -1.5, -1.2, -1.2, -1.1, -0.6, -0.3, -0.1, -0.0, -0.0],
   stack: 'negative',
   stacking: 'normal',
   color: '#50B432'
  },
  // 含正负值的独立系列（净迁移人口）
  {
   name: 'Net Migration',
   data: [0.5, -0.3, 0.2, -0.4, 0.6, -0.2, 0.3, -0.1, 0.4, -0.5, 0.2, -0.3, 0.1, -0.2, 0.3, -0.1, 0.0, 0.0, 0.0, 0.0, 0.0],
   stack: 'migration',
   stacking: false,
   color: '#ED561B'
  },
  // 堆叠的正值系列（女性城乡细分）
  {
   name: 'Female - Urban',
   data: [1.1, 1.0, 1.1, 1.2, 1.3, 1.5, 1.6, 1.5, 1.6, 2.1, 2.2, 1.8, 1.7, 1.3, 1.5, 1.5, 0.9, 0.6, 0.3, 0.1, 0.0],
   stack: 'positive',
   stacking: 'normal',
   color: '#DDDF00'
  },
  {
   name: 'Female - Rural',
   data: [1.0, 1.0, 1.1, 1.2, 1.3, 1.5, 1.5, 1.4, 1.5, 2.0, 2.1, 1.8, 1.7, 1.3, 1.4, 1.4, 0.9, 0.6, 0.3, 0.0, 0.0],
   stack: 'positive',
   stacking: 'normal',
   color: '#24CBE5'
  }
 ]
});

效果说明 #

在这个示例中：

• 每个年龄类别下，左侧（负值区）是堆叠的男性城乡人口柱形
• 中间是独立的净迁移人口柱形（有正有负）
• 右侧（正值区）是堆叠的女性城乡人口柱形
• 所有系列都使用column类型，完全符合你的需求

你可以根据实际业务调整系列数量、stack分组和数据，Highcharts的堆叠机制支持非常灵活的组合方式，不需要嵌套series就能实现这种效果。

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