Highcharts Bar与Column组合图显示异常问题求助

我看了你的代码，问题出在Highcharts中Bar（横向条形图）和Column（纵向柱状图）默认使用的坐标轴方向是交叉的：Column是基于x轴分类、y轴数值的纵向图表，而Bar则默认反转了坐标轴逻辑，是基于y轴分类、x轴数值的横向图表。直接把两个系列塞进同一个图表里，会导致坐标轴冲突，自然达不到你想要的“Bar在负轴、Column在正轴”的效果。

下面是调整后的代码，完美实现你的预期效果：

Highcharts.chart('container', {
    title: {
        text: 'Combination chart'
    },
    // 主x轴：分类轴，对应Column系列（底部）
    xAxis: [{
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
        title: { text: null }
    }, 
    // 第二个x轴：数值轴，对应Bar系列（顶部，负方向）
    {
        opposite: true,
        title: { text: null },
        labels: {
            formatter: function() {
                return -this.value; // 把负值显示为正值，更符合阅读习惯
            }
        },
        min: -7,
        max: 0
    }],
    // 主y轴：数值轴，对应Column系列（右侧，正方向）
    yAxis: [{
        title: { text: null },
        min: 0,
        max: 7
    },
    // 第二个y轴：分类轴，对应Bar系列（左侧，和主x轴分类一致）
    {
        opposite: true,
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
        title: { text: null }
    }],
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '50px',
                top: '18px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    series: [{
        type: 'column',
        name: 'Jane',
        data: [3, 2, 1, 3, 4],
        xAxis: 0, // 明确关联主x轴
        yAxis: 0  // 明确关联主y轴
    }, {
        type: 'bar',
        name: 'Average',
        data: [-3, -2.67, -3, -6.33, -3.33],
        xAxis: 1, // 明确关联第二个数值x轴
        yAxis: 1  // 明确关联第二个分类y轴
    }]
});

关键调整点说明： #

• 拆分独立坐标轴：为两个系列分别配置专属的坐标轴组，避免交叉冲突：
  • Column使用底部的分类x轴 + 右侧的正数值y轴；
  • Bar使用左侧的分类y轴 + 顶部的负数值x轴；
• 锁定轴范围：给数值轴设置min和max，强制Column的正数值在右侧正轴区域展示，Bar的负数值在左侧负轴区域展示；
• 优化标签显示：Bar的x轴标签通过格式化函数把负值转为正值显示，避免用户看到突兀的负数；
• 明确轴关联：每个系列通过xAxis和yAxis属性指定对应的坐标轴，彻底消除系统自动匹配的混乱。

这样调整后，你就能看到Column系列在正轴区域纵向展示，Bar系列在负轴区域横向展示，完全符合你的预期。

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