Highcharts 双 Y 轴分组错位柱状图・代码详解

双 Y 轴、非分组错位并列柱状图，同时展示两类指标：

• 左轴：员工数量（人数，普通数值）
• 右轴：利润（百万美元，金额） 同一分类下 4 根柱子错开摆放，不会互相重叠，用来对比「优化前 / 优化后」两组数据差异。

示例代码

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Efficiency Optimization by Branch'
    },
    xAxis: {
        categories: [
            'Seattle HQ',
            'San Francisco',
            'Tokyo'
        ]
    },
    yAxis: [{
        min: 0,
        title: {
            text: 'Employees'
        }
    }, {
        title: {
            text: 'Profit (millions)'
        },
        opposite: true
    }],
    legend: {
        shadow: false
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            grouping: false,
            shadow: false,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Employees Optimized',
        color: 'rgba(126,86,134,1)',
        data: [140, 90, 40],
        pointPadding: 0.3,
        pointPlacement: -0.2
    }, {
        name: 'Profit Optimized',
        color: 'rgba(186,60,61,.9)',
        data: [203.6, 198.8, 208.5],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: 0.3,
        pointPlacement: 0.2,
        yAxis: 1
    }, {
        name: 'Employees',
        color: 'rgba(165,170,217,1)',
        data: [150, 73, 20],
        pointPadding: 0.4,
        pointPlacement: -0.2
    }, {
        name: 'Profit',
        color: 'rgba(248,161,63,.9)',
        data: [183.6, 178.8, 198.5],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: 0.4,
        pointPlacement: 0.2,
        yAxis: 1
    }]
});

核心关键参数讲解

1、grouping: false

默认 grouping:true：同 X 分类的柱子会自动紧紧并排。 设置为 false → 取消自动分组 ，柱子位置交给 pointPlacement 手动偏移，实现错位效果。

2、pointPlacement（偏移量）

• 负数：柱子向 X 轴标签左侧 偏移
• 正数：柱子向 X 轴标签右侧 偏移 示例 -0.2、0.2，让员工柱子靠左、利润柱子靠右。

取值范围一般 -0.5 ~ 0.5，超出范围柱子会跑到别的分类下。

3、双 Y 轴绑定 yAxis: 1

yAxis 数组下标从 0 开始

• yAxis:0 → 左轴（员工数）
• yAxis:1 → 右轴（利润） 系列里写上 yAxis:1，该条数据就使用右侧坐标轴刻度。

4、tooltip.shared: true

鼠标悬停某一个 X 点位，一次性把 4 条系列的数据全部展示出来，适合多指标对比场景。

适用业务场景

1. 同一维度两套不同量级指标对比（人数 vs 营收、产量 vs 能耗）
2. 优化前后、改造前后效果对比柱状图
3. 大屏看板双指标错位对比图表

常见坑点

1. 忘记关闭 grouping:false → pointPlacement 偏移不生效
2. 偏移值过大，柱子跨到相邻分类，布局错乱
3. 双 Y 轴忘记写 opposite:true，两根坐标轴重叠在一起