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

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

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

示例代码

1Highcharts.chart('container', {
2    chart: {
3        type: 'column'
4    },
5    title: {
6        text: 'Efficiency Optimization by Branch'
7    },
8    xAxis: {
9        categories: [
10            'Seattle HQ',
11            'San Francisco',
12            'Tokyo'
13        ]
14    },
15    yAxis: [{
16        min: 0,
17        title: {
18            text: 'Employees'
19        }
20    }, {
21        title: {
22            text: 'Profit (millions)'
23        },
24        opposite: true
25    }],
26    legend: {
27        shadow: false
28    },
29    tooltip: {
30        shared: true
31    },
32    plotOptions: {
33        column: {
34            grouping: false,
35            shadow: false,
36            borderWidth: 0
37        }
38    },
39    series: [{
40        name: 'Employees Optimized',
41        color: 'rgba(126,86,134,1)',
42        data: [140, 90, 40],
43        pointPadding: 0.3,
44        pointPlacement: -0.2
45    }, {
46        name: 'Profit Optimized',
47        color: 'rgba(186,60,61,.9)',
48        data: [203.6, 198.8, 208.5],
49        tooltip: {
50            valuePrefix: '$',
51            valueSuffix: ' M'
52        },
53        pointPadding: 0.3,
54        pointPlacement: 0.2,
55        yAxis: 1
56    }, {
57        name: 'Employees',
58        color: 'rgba(165,170,217,1)',
59        data: [150, 73, 20],
60        pointPadding: 0.4,
61        pointPlacement: -0.2
62    }, {
63        name: 'Profit',
64        color: 'rgba(248,161,63,.9)',
65        data: [183.6, 178.8, 198.5],
66        tooltip: {
67            valuePrefix: '$',
68            valueSuffix: ' M'
69        },
70        pointPadding: 0.4,
71        pointPlacement: 0.2,
72        yAxis: 1
73    }]
74});

核心关键参数讲解

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，两根坐标轴重叠在一起

《Highcharts 双 Y 轴分组错位柱状图・代码详解》 是转载文章，点击查看原文。