javascript - 谷歌图表在标签中显示错误，直到我调整窗口大小

Question

当我单击带有 Google 图表的选项卡时，首先它显示得很小并且未应用宽度样式：

但是当我调整窗口大小时，它会“跳跃”，因为它应该看起来：

我想从一开始就看到它，因为它在第二张图片中被缩放。这是我注意到的一件事：在它“跳转”到正确格式之后，如果我转到上一个选项卡并稍微调整窗口大小，当我按下“宏”选项卡时，它又变小了。

这是代码：

<script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script src="https://www.google.com/jsapi?fake=.js"></script>
<script>
    $(window).on("throttledresize", function (event) {
        var options = {
            width: '100%',
            height: '100%'
        };

        var data = google.visualization.arrayToDataTable([]);
        drawChart(data, options);
    });
</script>

来自标头的 CSS：

<style>
    #chart_wrap {
        position: relative;
        padding-bottom: 100%;
        height: 0;
        overflow:hidden;
    }

    #piechart {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

还有 HTML 代码 - 我正在使用语义 UI：

<div class="ui tab segment" data-tab="macros">

        <div id="chart_wrap">
            <div id="piechart"></div>
        </div>

</div>

标签： javascriptjquerytabsgoogle-visualizationsemantic-ui