Javascript 在引导选项卡中显示Google图表时出现问题

我在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>

玩家资源
生产者资源
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawTotalPlayerChart）；
google.charts.setOnLoadCallback（drawTotalProducerChart）；
函数drawTotalPlayerChart（）{
[...]
var chart=new google.visualization.LineChart（document.getElementById（'totalPlayerChart'）；
图表绘制（数据、选项）；
}
函数drawTotalProducerChart（）{
[...]
var chart=new google.visualization.LineChart（document.getElementById（'totalProducerChart'）；
图表绘制（数据、选项）；
}

---

您需要在

显示的.bs.选项卡上初始化图表

---

下面是其他人的bootply演示，但这是一个谷歌地图（同样的方法适用）：

这是在隐藏容器时绘制图表的结果，
选项中没有特定的大小设置时

要更正此问题，请添加特定大小，或等到选项卡可见后再绘制图表

另外，

setOnLoadCallback

每次页面加载只需要调用一次

它也可以放在

load

语句中

建议类似于以下代码段的设置

google.charts.load('current', {
  callback: function () {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        switch ($(e.target).html()) {
          case 'Players':
            drawTotalPlayerChart();
            break;

          case 'Producers':
            drawTotalProducerChart();
            break;
        }
    });

    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);
    }

    // draw chart on initial tab
    drawTotalPlayerChart();
  },
  packages: ['corechart']
});

---

在

选项卡

内执行

图表

，

图形

时，可能会出现内容大小调整问题

此类问题的原因

在引导选项卡中，当我们切换选项卡时，只有活动选项卡将具有属性

display:block其余
选项卡内容
应用于
显示：无

如果div元素有一个属性
display:none，则这是该问题的主要原因，则宽度也被视为0px

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


CSS
谢谢

注意：这是使用CSS解决此问题的方法之一
 我也经历了一个选择，使用CSS解决问题。你能给我你对我的方法的意见/反馈吗！！！
.tab-content>.tab-pane {
  height: 1px;
  overflow: hidden;
  display: block;
 visibility: hidden;
}
.tab-content>.active {
  height: auto;
  overflow: auto;
  visibility: visible;
}