javascript - 在 Bootstrap 选项卡中显示 Google 图表的问题

Question

我在 Boostrap 选项卡中显示 Google 图表时遇到问题。
我有两个标签，每个标签都有一个谷歌图表。在第一个中，图表正确显示，但在第二个中，图表很小且压缩。
我不明白为什么..

这是我的代码:

<div class="tab-pane active" id="player">
    <h3>Players' resources</h3>
    <div id="totalPlayerChart" style="height: 500px;"></div>
</div>

<div class="tab-pane" id="producer">
    <h3>Producers' resources</h3>
    <div id="totalProducerChart" style="height: 500px;"></div>
</div>

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawTotalPlayerChart);
    google.charts.setOnLoadCallback(drawTotalProducerChart);

    function drawTotalPlayerChart() {
        [...]
        var chart = new google.visualization.LineChart(document.getElementById('totalPlayerChart'));
        chart.draw(data, options);
    }

    function drawTotalProducerChart() {
        [...]
        var chart = new google.visualization.LineChart(document.getElementById('totalProducerChart'));
        chart.draw(data, options);
    }
</script>

Answer 1

在实现 charts , graphs里面tabs ，可能会出现内容调整大小问题。

此类问题的原因

在 Bootstrap 选项卡中，当我们切换选项卡时，只有事件选项卡将具有属性 display: block;其余的tab-contents应用于display: none; .

如果 div 元素具有属性 display: none;，则这是此问题的主要原因。 ，有宽度 也被视为 0像素 .

为了解决这个问题，我添加了以下 CSS , 而不是使用 display: none; 隐藏选项卡, 我用 处理高度 & 溢出 此方法的属性宽度不会设置为 0像素 .

CSS

.tab-content>.tab-pane {
  height: 1px;
  overflow: hidden;
  display: block;
 visibility: hidden;
}
.tab-content>.active {
  height: auto;
  overflow: auto;
  visibility: visible;
}

谢谢。

注意:这是使用 CSS 解决此问题的方法之一。