在引导选项卡中显示 Google 图表的问题答案

【问题标题】：Issue with displaying Google Chart in a bootstrap tab在引导选项卡中显示 Google 图表的问题
【发布时间】：2017-09-10 03:31:21
【问题描述】：

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

【问题讨论】：

标签： javascript twitter-bootstrap charts google-visualization

【解决方案1】：

你需要在shown.bs.tab上初始化图表

这是其他人的 bootply 演示，但这是 Google 地图（同样的方法适用）：http://www.bootply.com/102241

【讨论】：

【解决方案2】：

这是在隐藏容器时绘制图表的结果，
when there are no specific size settings in the options

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

另外，setOnLoadCallback 每次页面加载只需要调用一次

也可以放在load语句中

推荐设置类似如下sn-p...

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

【讨论】：

我也经历了一种选择，使用 CSS 解决。您能否就我的方法给我您的意见/反馈！！！

【解决方案3】：

在tabs 内部实现charts、graphs 时，可能会出现内容调整大小问题。

此类问题的原因

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

如果 div 元素有一个属性display: none;，这是导致此问题的主要原因，那么 width 也被视为 0px。

为了解决这个问题，我添加了以下 CSS，我没有使用 display: none; 隐藏标签，而是使用 height 和 overflow 属性通过此方法宽度不会设置为 0px。

CSS

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

谢谢。

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

【讨论】：