Highcharts钻取图表上边距设置：钻取返回按钮遮挡图表

我来帮你搞定这个drill up按钮挡图表的小麻烦～下面给你两种实用的解决方案，按需选择就行：

方案一：动态调整图表上边距（推荐） #

通过监听钻取和返回的事件，动态修改图表的marginTop，让钻取后的图表自动下移，给按钮留出空间：

完整代码示例 #

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>

<script>
Highcharts.chart('container', {
    chart: {
        marginTop: 30, // 钻取前的默认上边距
        events: {
            // 触发钻取时，增大上边距
            drilldown: function() {
                this.marginTop = 70;
                this.redraw();
            },
            // 钻取返回时，恢复原上边距
            drillup: function() {
                this.marginTop = 30;
                this.redraw();
            }
        }
    },
    title: {
        text: '钻取图表演示'
    },
    xAxis: {
        type: 'category'
    },
    series: [{
        name: '主分类',
        data: [
            { name: '分类A', y: 8, drilldown: 'catA' },
            { name: '分类B', y: 5, drilldown: 'catB' }
        ]
    }],
    drilldown: {
        series: [{
            id: 'catA',
            data: [['子项A1', 3], ['子项A2', 5]]
        }, {
            id: 'catB',
            data: [['子项B1', 2], ['子项B2', 3]]
        }]
    }
});
</script>

原理很简单：钻取时把图表上边距调大，让图表整体下移，避开顶部的drill up按钮；返回时再把边距改回去，不影响初始状态的布局。

方案二：直接调整钻取按钮的位置 #

如果你不想动图表的边距，也可以通过CSS修改drill up按钮的位置，让它不挡图表：

.highcharts-drillup-button {
    top: 15px !important; /* 调整按钮顶部距离 */
    left: 15px !important; /* 调整按钮左侧距离 */
    /* 还可以加个背景色，让按钮更显眼 */
    background: #fff !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
}

这种方式更直接，适合想保留图表原有布局，只调整按钮位置的场景。

你可以根据自己的实际需求选其中一种，测试一下就能看到效果啦～

内容的提问来源于stack exchange，提问作者Kees de Jager