如何缩小Highcharts最后一个容器与后续文本的间距？

安全阿岳

2026-6-27

缩小Highcharts容器与后续文本的间距问题

问题描述

我用Highcharts创建了container2、container3、container4三个图表容器，container4后方有一段文本ABCD。尝试缩小container4与ABCD之间的间距，但多次调整均未成功，相关代码如下：

JavaScript代码

function generateChart(containerId, titleText, responses, data) {
    Highcharts.chart(containerId, {
        title: {
            text: titleText,
            align: 'center',
            style: {
                color: '#333333',
                fontSize: '12px',
                fontWeight: 'bold'
            }
        },
        chart: {
            type: 'pie',
            marginTop: -90,
            events: {
                load: function() {
                    var chart = this,
                        centerX = chart.plotWidth / 2.1,
                        centerY = chart.plotHeight / 3.2,
                        innerSize = '38%',
                        titleText = responses + '<br>Responses';

                    chart.renderer.text(titleText, centerX, centerY)
                        .css({
                            color: '#333333',
                            fontSize: '11px',
                            fontWeight: 'bold'
                        })
                        .add();
                }
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        plotOptions: {
            pie: {
                innerSize: '38%',
                size: '42%'
            },
            series: {
                allowPointSelect: true,
                showInLegend: true,
                cursor: 'pointer',
                dataLabels: [{
                    enabled: true,
                    distance: 20
                }, {
                    enabled: true,
                    distance: -30,
                    format: '{point.percentage:.1f}%',
                    style: {
                        fontSize: '0.7em',
                        textOutline: 'none'
                        
                    },
                    filter: {
                        operator: '>',
                        property: 'percentage',
                        value: 10
                    }
                }]
            }
        },
colors: ['#203864', '#b7cbee', '#f8ce04', '#b6992d'],
legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            symbolWidth: 10
        },
        series: [{
            name: 'Percentage',
            colorByPoint: true,
            data: data
        }]
    });
}

// Generate charts
generateChart('container2', 'Do you like sdd  df gf f gf  fh g h g  j hjhjh j j j jh  gjh j j hj fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j?', 549, [
    { name: 'Some of the time', y: 34 },
    { name: 'Never', y: 31 },
    { name: 'Most of the time', y: 35 }
]);

generateChart('container3', 'Do you fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh?', 549, [
    { name: 'Some of the time', y: 67 },
    { name: 'Most of the time', y: 33 }
]);

generateChart('container4', 'fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh.', 543, [
    { name: 'Some of the time', y: 55 },
    { name: 'Never', y: 15 },
    { name: 'Most of the time', y: 25 },
    { name: 'All the time', y: 5 }
]);

CSS代码

#container3 {
    margin-top: -40px; /* Adjust the value as needed */
}
#container4 {
    margin-top: -90px; /* Adjust the value as needed */
}

HTML代码

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="containerall" style=" border: 1px solid lightgray; margin-top: 20px;">
<div id="container2"></div>

<div id="container3"></div>

<div id="container4"></div>
</div>
ABCD

解决方法

仅调整容器的margin-top无法解决问题，因为Highcharts图表本身会在底部预留默认内边距，需要从以下几方面修改：

修改图表配置的底部边距
在chart配置项中添加marginBottom，设置为负数或0，直接减少图表自身的底部空白：

chart: {
    type: 'pie',
    marginTop: -90,
    marginBottom: -30, // 按需调整数值，负数可进一步缩小间距
    events: {
        // 原有事件代码保持不变
    }
}

调整容器的底部外边距
给container4添加负的margin-bottom，进一步压缩与后续文本的距离：

#container4 {
    margin-top: -90px;
    margin-bottom: -20px; /* 按需调整数值 */
}

清除父容器的底部内边距（可选）
如果父容器containerall存在默认内边距，可添加padding-bottom: 0消除影响：

#containerall {
    border: 1px solid lightgray;
    margin-top: 20px;
    padding-bottom: 0;
}

修改后的完整代码

JavaScript

function generateChart(containerId, titleText, responses, data) {
    Highcharts.chart(containerId, {
        title: {
            text: titleText,
            align: 'center',
            style: {
                color: '#333333',
                fontSize: '12px',
                fontWeight: 'bold'
            }
        },
        chart: {
            type: 'pie',
            marginTop: -90,
            marginBottom: -30, // 新增底部边距设置
            events: {
                load: function() {
                    var chart = this,
                        centerX = chart.plotWidth / 2.1,
                        centerY = chart.plotHeight / 3.2,
                        innerSize = '38%',
                        titleText = responses + '<br>Responses';

                    chart.renderer.text(titleText, centerX, centerY)
                        .css({
                            color: '#333333',
                            fontSize: '11px',
                            fontWeight: 'bold'
                        })
                        .add();
                }
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        plotOptions: {
            pie: {
                innerSize: '38%',
                size: '42%'
            },
            series: {
                allowPointSelect: true,
                showInLegend: true,
                cursor: 'pointer',
                dataLabels: [{
                    enabled: true,
                    distance: 20
                }, {
                    enabled: true,
                    distance: -30,
                    format: '{point.percentage:.1f}%',
                    style: {
                        fontSize: '0.7em',
                        textOutline: 'none'
                        
                    },
                    filter: {
                        operator: '>',
                        property: 'percentage',
                        value: 10
                    }
                }]
            }
        },
colors: ['#203864', '#b7cbee', '#f8ce04', '#b6992d'],
legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            symbolWidth: 10
        },
        series: [{
            name: 'Percentage',
            colorByPoint: true,
            data: data
        }]
    });
}

// Generate charts
generateChart('container2', 'Do you like sdd  df gf f gf  fh g h g  j hjhjh j j j jh  gjh j j hj fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j?', 549, [
    { name: 'Some of the time', y: 34 },
    { name: 'Never', y: 31 },
    { name: 'Most of the time', y: 35 }
]);

generateChart('container3', 'Do you fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh?', 549, [
    { name: 'Some of the time', y: 67 },
    { name: 'Most of the time', y: 33 }
]);

generateChart('container4', 'fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh.', 543, [
    { name: 'Some of the time', y: 55 },
    { name: 'Never', y: 15 },
    { name: 'Most of the time', y: 25 },
    { name: 'All the time', y: 5 }
]);

CSS

#container3 {
    margin-top: -40px;
}
#container4 {
    margin-top: -90px;
    margin-bottom: -20px; /* 新增底部外边距 */
}
#containerall {
    border: 1px solid lightgray;
    margin-top: 20px;
    padding-bottom: 0; /* 清除父容器底部内边距 */
}

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="containerall">
<div id="container2"></div>

<div id="container3"></div>

<div id="container4"></div>
</div>
ABCD

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

如何缩小Highcharts最后一个容器与后续文本的间距？

问题描述 #

JavaScript代码 #

CSS代码 #

HTML代码 #

解决方法 #

修改后的完整代码 #

JavaScript #

CSS #

HTML #