Highcharts仪表盘：移除底部边框及调整指针位置求助

我来帮你搞定这两个仪表盘的小问题，直接上具体的修改方案：

1. 移除底部边框 #

底部边框其实是仪表盘y轴的轴线，你只需要在yAxis配置里添加lineWidth: 0就能去掉它。如果你的仪表盘还设置了面板（pane）边框，也可以把pane的borderWidth设为0，彻底清除所有多余边框。

2. 将指针向下移动 #

要让指针向下移动，有两种简单的方式：

• 调整指针（dial）的偏移量：在plotOptions.gauge.dial里设置offset属性，给一个负数就能让指针向下偏移，数值大小可以按需调整。
• 调整仪表盘面板中心：修改pane的center属性，把垂直方向的百分比调大（比如从默认的'50%'改成'70%'），让整个仪表盘的中心下移，指针自然也跟着下来。

下面是修改后的完整示例代码：

<div id="gauge-container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

<script>
$(function () {
    $('#gauge-container').highcharts({
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: '' // 可按需保留或移除标题
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            center: ['50%', '75%'], // 可选：调整面板中心下移
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0, // 清除面板边框
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 0,
                outerRadius: '107%'
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // 移除底部y轴边框
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0, // 关键：设置为0移除底部轴线
            minorTickInterval: null,
            tickPixelInterval: 40,
            tickWidth: 0,
            labels: {
                step: 2,
                rotation: 'auto'
            }
        },

        plotOptions: {
            gauge: {
                dial: {
                    radius: '80%',
                    backgroundColor: 'black',
                    borderColor: 'black',
                    borderWidth: 1,
                    baseWidth: 10,
                    topWidth: 1,
                    length: '70%',
                    offset: -15 // 关键：负数让指针向下移动，数值按需调整
                },
                pivot: {
                    backgroundColor: 'black',
                    radius: 6
                }
            }
        },

        series: [{
            name: '数值',
            data: [80],
            tooltip: {
                valueSuffix: ' %'
            }
        }]
    });
});
</script>

你可以根据实际显示效果，微调offset的数值或者pane.center的垂直百分比，直到达到你想要的位置。

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