如何让双轴Highcharts柱状图实现响应式适配？

设计师制作了一个共用垂直轴、两个不同水平轴且并排布局的柱状图，需要适配移动端，但该图表在窄视口下显示异常。

曾尝试使用两个图表，配合CSS在大屏下隐藏第二个垂直轴，小屏下堆叠显示并展示轴，但这样无法实现包含两个图表数据的共享提示框（tooltip）。

请问能否直接通过Highcharts的响应式功能实现该需求？

可以直接通过Highcharts的响应式配置实现需求，核心思路是在不同视口尺寸下动态调整两个Y轴的布局：大屏时保持并排，小屏时改为上下堆叠，同时保留共享tooltip功能。

具体实现步骤：

• 在chart配置中添加responsive选项，定义断点规则
• 根据视口宽度调整Y轴的width、left、top等位置属性
• 确保tooltip的共享逻辑不受布局变化影响

修改后的完整代码如下：

JavaScript 代码 #

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        // 响应式配置
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 768 // 移动端断点
                },
                chartOptions: {
                    yAxis: [{
                        width: '100%',
                        top: '0%',
                        height: '45%'
                    }, {
                        width: '100%',
                        left: '0%',
                        top: '55%',
                        height: '45%',
                        labels: {
                            align: 'right',
                            y: 0
                        }
                    }],
                    // 调整系列间距适配堆叠布局
                    plotOptions: {
                        series: {
                            pointPadding: 2,
                            groupPadding: 0.1
                        }
                    }
                }
            }]
        }
    },
    xAxis: {
        categories: ['entity 1', 'entity 2','entity3','entity4','entity 5'],
        labels: {
            style: {
                color: 'black',
                fontFamily: 'var(--sans)',
                fontSize: '.85rem',
                fontWeight: '500'
            }
        }
    },
    yAxis: [{
        width: '45%',
        min:0,
        max:275,
        title: {
            enabled: true,
            text: 'VALUE'
        }
    }, {
        width: '45%',
        left: '50%',
        min:0,
        max:80,
        title: {
            enabled: true,
            text: 'COST IN MILLIONS OF DOLLARS'
        },
        labels: {
            align: 'left',
            y: -21,
            format:'${value}M'
        }
    }],
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        series: {
            pointPadding:5,
            borderWidth: 1
        }
    },
    tooltip: {
        shared: true,
        useHTML: true,
        formatter: function() {
            var chart = this.points && this.points[0] && this.points[0].series.chart;
            var hoverSeries = chart && chart.hoverSeries;
            var hoveredYear = hoverSeries && hoverSeries.options && hoverSeries.options.year ? hoverSeries.options.year : (this.points && this.points[0] && this.points[0].series.options.year);
            // 筛选当前年份的点
            var pts = this.points.filter(function(p) {
                return p.series.options && p.series.options.year == hoveredYear;
            });
            var s = '<b>' + this.x + ': ' + hoveredYear + '</b>';
            pts.forEach(function(p) {
                // Y轴1为金额数据
                if (p.series.options && p.series.options.yAxis == 1) {
                    var val = typeof Highcharts !== 'undefined' ? Highcharts.numberFormat(p.y, 1) : p.y;
                    s += '<br/>' + p.series.name + ':$' + val + 'M</b>';
                } else {
                    var val2 = typeof Highcharts !== 'undefined' ? Highcharts.numberFormat(p.y, 0) : p.y;
                    s += '<br/>  <b>' + val2 + ' Number</b>';
                }
            });
            return s;
        }
    },
    series: [{
        yAxis: 0,
        color: 'blue',
        year: '2024',
        name: '2024',
        data: [223, 190, 260, 124, 136]
    }, {
        yAxis: 0,
        color: 'green',
        year: '2025',
        name: '2025',
        data: [230, 240, 264, 128, 136]
    }, {
        yAxis: 1,
        color: 'blue',
        year: '2024',
        name: '2024',
        data: [77.3, .251, 48.2, 19.6, 28.6]
    }, {
        yAxis: 1,
        color: 'green',
        year: '2025',
        name: '2025',
        data: [79.3, .271, 49.1, 20.2, 28.9]
    }]
});

CSS 代码 #

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}
.highcharts-figure,.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}
#container {
    height: 600px; /* 调整高度适配堆叠布局 */
}
.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60, #666);
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td,.highcharts-data-table th,.highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr,.highcharts-data-table tbody tr:nth-child(even) {
    background: var(--highcharts-neutral-color-3, #f7f7f7);
}
.highcharts-description {
    margin: 0.3rem 10px;
}

HTML 代码 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

关键说明 #

• 响应式规则中，当视口宽度≤768px时，将两个Y轴改为上下堆叠布局，分别设置height为45%，并调整top和left属性
• 同时调整图表容器高度和系列间距，保证小屏显示效果
• 原有的共享tooltip逻辑完全保留，无需修改，因为所有数据仍在同一个图表实例中

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