在引导标签中显示Google Chart的问题 [英] Issue with displaying Google Chart in a bootstrap tab

问题描述

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

I have an issue with displaying a Google Chart in a Boostrap tab. I have two tabs, and a Google Chart in each. In the first one, the chart is correctly displayed, but in the second one, the chart is tiny and compressed. I don't understand why..

这是我的代码：

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

推荐答案

这是在隐藏容器时绘制图表的结果，

当选项中没有特定尺寸设置

this is the result of drawing a chart while it's container is hidden,
when there are no specific size settings in the options

来更正问题，添加特定尺寸，或等到标签显示后再绘制图表。 。

to correct the issue, add specific size, or wait until the tab is visible before drawing the chart...

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

also, setOnLoadCallback only needs to be called once per page load

它也可以放在加载语句中

建议设置类似到以下代码段...

recommend setup similar to the following snippet...

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

这篇关于在引导标签中显示Google Chart的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！