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

问题描述

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

这是我的代码:

<h3>玩家资源</h3><div id="totalPlayerChart" style="height: 500px;"></div>
<div class="tab-pane" id="producer"><h3>生产者资源</h3><div id="totalProducerChart" style="height: 500px;"></div>

<script type="text/javascript">google.charts.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'));图表绘制(数据，选项)；}

解决方案

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

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

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

也可以放在load语句中

推荐设置类似于以下代码片段...

google.charts.load('current', {回调:函数(){$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {开关 ($(e.target).html()) {案例玩家":drawTotalPlayerChart();休息;案例生产者":drawTotalProducerChart();休息;}});函数 drawTotalPlayerChart() {[...]var chart = new google.visualization.LineChart(document.getElementById('totalPlayerChart'));图表绘制(数据，选项)；}函数 drawTotalProducerChart() {[...]var chart = new google.visualization.LineChart(document.getElementById('totalProducerChart'));图表绘制(数据，选项)；}//在初始选项卡上绘制图表drawTotalPlayerChart();},包:['corechart']});

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

Here is my code :

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

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

it can also be placed in the load statement

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