移除Highcharts极坐标柱状图下方的空白区域

问题描述 #

在Highcharts中创建角度范围为-90°至90°的极坐标柱状图时，图表下方出现大量空白区域，原因是容器仍按完整圆形布局计算而非半圆。需要移除该空白，让Highcharts标识和文本“This text should be right underneath the graph”紧贴图表下方。

解决方案 #

通过调整图表布局配置，让半圆底部对齐容器底部，并消除额外留白，具体修改如下：

修改JavaScript配置 #

1. 调整极坐标面板中心位置：将pane.center的垂直方向值设为100%，使半圆的圆心对齐容器底部，避免下半部分空白占用空间
2. 取消图表底部留白：设置chart.spacingBottom和marginBottom为0，移除图表本身的底部间距
3. 可选优化y轴范围：调整yAxis.max，确保柱子高度适配半圆范围（根据实际数据调整）

修改后的完整代码：

Highcharts.chart("container", {
    chart: {
        type: "bar",
        polar: true,
        spacingBottom: 0,
        marginBottom: 0
    },
    title: {
        text: undefined
    },
    pane: {
        startAngle: -90,
        endAngle: 90,
        size: "100%",
        center: ['50%', '100%']
    },
    legend: {
        enabled: false
    },
    yAxis: {
        max: 35
    },
    series: [{
        data: [{y: 30}, {y: 20}, {y: 25}]
    }]
})

效果说明 #

修改后，半圆图表会完全贴合容器顶部和底部，下方空白被消除，文本和Highcharts标识会直接紧贴图表下方。

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