Bootstrap模态框中Google 3D饼图数值超出图表范围问题求助

我懂你遇到的麻烦了——在Bootstrap模态框里渲染Google Chart的3D饼图时，数值标签跑到饼图外面、显示不全对吧？这问题其实挺常见的，根源在于模态框初始是隐藏状态，Google Chart初始化时没法正确获取容器的真实尺寸，导致布局计算出了错。

问题原因 #

Bootstrap模态框默认是display: none的，页面加载时容器没有实际的宽高。而Google Chart在绘制图表时，会依赖容器的当前尺寸来计算饼图大小、标签位置这些细节。用一个尺寸为0或者不准确的容器来初始化图表，自然会出现标签错位、超出范围的情况。

解决方案 #

这里给你两个实用的解决办法，结合起来用效果最好：

1. 等模态框显示后再初始化图表 #

Bootstrap模态框提供了shown.bs.modal事件，这个事件会在模态框完全显示、容器尺寸确定后触发。我们把图表初始化逻辑绑定到这个事件上，就能保证Google Chart拿到正确的容器尺寸。

修改你的JavaScript代码如下：

$(document).ready(function() {
    // 监听模态框完全显示的事件
    $('#myModal').on('shown.bs.modal', function () {
        // 加载并初始化Google Chart
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
    });

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work',     11],
            ['Eat',      2],
            ['Commute',  2],
            ['Watch TV', 2],
            ['Sleep',    7]
        ]);

        var options = {
            title: 'My Daily Activities',
            is3D: true,
            // 可选：调整图例位置优化显示空间
            legend: {position: 'right'},
            pieSliceText: 'value'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
});

2. 给图表容器设置固定宽高 #

给#chart_div明确设置宽高，让容器即使在隐藏状态下也有确定的尺寸，辅助Google Chart更准确地计算布局：

#chart_div {
    width: 100%;
    height: 400px;
}

原理说明 #

当模态框触发shown.bs.modal事件时，模态框已经完成渲染，#chart_div的宽高已经是真实有效的数值。这时候再初始化Google Chart，它就能基于正确的容器尺寸来绘制饼图和标签，从根源上避免数值超出饼图范围的问题。

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