javascript – 在引导标签中显示Google图表的问题

我在Boostrap标签中显示Google Chart时遇到问题.
我有两个标签,每个标签都有一个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>

enter image description here
enter image description here

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

要更正问题,添加特定尺寸,或等到标签显示后再绘制图表…

另外,每个页面加载只需要调用一次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']
});
https://stackoverflow.com/questions/43401936/issue-with-displaying-google-chart-in-a-bootstrap-tab

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 在引导标签中显示Google图表的问题