如何移除Highcharts仪表盘（gauge）图表顶部的空白边距？

问题原因 #

你配置中的pane.center属性第二个参数设为了85%，意味着仪表盘整体的中心点被放在了容器高度85%的位置，自然会在顶部产生大量空白。

解决方案 #

按以下步骤修改配置即可实现仪表盘居中：

1. 调整pane定位配置，将中心移到容器正中，同时适配半弧尺寸：

pane: {
    center: ['50%', '50%'], // 中心点调整到容器正中间
    size: '120%', // 半弧结构适当放大尺寸，避免内容显示过小
    startAngle: -90,
    endAngle: 90,
    background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
    }
},

2. 移除chart默认内边距，避免额外留白：

chart: {
    type: 'solidgauge', 
    animation: true,
    backgroundColor: 'transparent',
    margin: [0, 0, 0, 0] // 清除上下左右默认内边距
},

3. 可选调整：如果不需要y轴标题，可以直接关闭，避免它占用顶部空间：

yAxis: {
    title: null, // 不需要标题直接移除，需要的话可调整y属性的偏移值
    // 其余yAxis配置保留即可
}

额外建议：给承载图表的div设置固定宽高更方便控制显示效果，例如：

#plate-count-gauge-dry-side {
    width: 300px;
    height: 300px;
}

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