Positionieren von Google Charts innerhalb der Bootstrap-Registerkarten

Question

Ich habe Bootstrap3-Registerkarten RES und BUS erstellt. In jeder dieser beiden Registerkarten möchte ich zwei Google-Karten platzieren (Flächen- und Kreiswagen). Also innerhalb Bootstrab tab-pane Ich Bootstrap Zeile setzen und es in Spalten col-sm-9 (für größere AreaChart) und col-sm-3 (für kleinere PieChart).

Identischer Inhalt befindet sich sowohl in BUS- als auch RES-Tabs! Die Position auf der zweiten Registerkarte (RES) ist jedoch ruiniert. WARUM? Und wie man es repariert?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 

 
    <div class="container"> 
 

 
     <div class="row text-center"> 
 

 
     <div class="col-sm-12"> 
 
      <div class="thumbnail"> 
 
      
 
      <h3>Title</h3> 
 

 
<hr> 
 

 
      <ul class="nav nav-tabs"> 
 
       <li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li> 
 
       <li><a data-toggle="tab" href="#RES">Res</a></li> 
 
      </ul> 
 

 
      <div class="tab-content"> 
 
       <div id="BUS" class="tab-pane active"> 
 
       
 
       <div class="row"> 
 
        <h3>BUS title</h3> 
 
        <div class="col-sm-9"> 
 
        <div id="AreaB1"></div> 
 
        </div> 
 
        <div class="col-sm-3"> 
 
        <div id="PieB1"></div> 
 
        </div> 
 
       </div><!-- .row --> 
 

 
     <script type="text/javascript"> 
 

 
     function drawChartsB() 
 
     { 
 
      var view; 
 

 
      var AreaOpt = { 
 
      height: 200, 
 
      legend: { position: 'bottom', maxLines: 1 }, 
 
      }; 
 

 
      var PieOpt = { 
 
      height: 200, 
 
      legend: { position: 'bottom', maxLines: 1 } 
 
      }; 
 

 
      view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]])); 
 
      view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]); 
 
      (new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt); 
 

 
      view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]])); 
 
      (new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt); 
 
     } 
 

 
     </script> 
 
    
 
       </div> 
 
       <div id="RES" class="tab-pane"> 
 

 
       <div class="row"> 
 
        <h3>RES title</h3> 
 
        <div class="col-sm-9"> 
 
        <div id="AreaR1"></div> 
 
        </div> 
 
        <div class="col-sm-3"> 
 
        <div id="PieR1"></div> 
 
        </div> 
 
       </div><!-- .row --> 
 
       
 
     <script type="text/javascript"> 
 

 
     function drawChartsR() 
 
     { 
 
      var view; 
 

 
      var AreaOpt = { 
 
      height: 200, 
 
      legend: { position: 'bottom', maxLines: 1 }, 
 
      }; 
 

 
      var PieOpt = { 
 
      height: 200, 
 
      legend: { position: 'bottom', maxLines: 1 } 
 
      }; 
 

 
      view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]])); 
 
      view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]); 
 
      (new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt); 
 

 
      view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]])); 
 
      (new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt); 
 
     } 
 

 
     </script> 
 
     
 
       </div> 
 
      </div><!-- .tab-content --> 
 
    
 
      </div><!-- .thumbnail --> 
 
     </div><!-- .col --> 
 

 
     </div><!-- .row --> 
 
     
 
    </div><!-- .container --> 
 

 
    <script type="text/javascript"> 
 

 
     google.charts.load("current",{callback:drawChartsB,packages:["corechart"]}); 
 
     google.charts.load("current",{callback:drawChartsR,packages:["corechart"]}); 
 

 
    </script>

Externe JSFiddle: enter link description here

Answer 1

Notwendigkeit zu warten, bis der Behälter vor dem Zeichnen Sie das Diagramm zu sehen ist,
oder müssen bestimmte Größeneinstellungen in den Diagrammoptionen festlegen ...

auch, empfehlen die load Anweisung nur einmal aufrufen ...

versuchen, das Setup ähnelt folgenden ...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

<div class="container"> 

    <div class="row text-center"> 

    <div class="col-sm-12"> 
     <div class="thumbnail"> 

     <h3>Title</h3> 

     <hr> 

     <ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li> 
      <li><a data-toggle="tab" href="#RES">Res</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div id="BUS" class="tab-pane active"> 

      <div class="row"> 
       <h3>BUS title</h3> 
       <div class="col-sm-9"> 
       <div id="AreaB1"></div> 
       </div> 
       <div class="col-sm-3"> 
       <div id="PieB1"></div> 
       </div> 
      </div><!-- .row --> 

    <script type="text/javascript"> 

    function drawChartsB() 
    { 
     var view; 

     var AreaOpt = { 
     height: 200, 
     legend: { position: 'bottom', maxLines: 1 }, 
     }; 

     var PieOpt = { 
     height: 200, 
     legend: { position: 'bottom', maxLines: 1 } 
     }; 

     view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]])); 
     view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]); 
     (new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt); 

     view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]])); 
     (new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt); 
    } 

    </script> 

      </div> 
      <div id="RES" class="tab-pane"> 

      <div class="row"> 
       <h3>RES title</h3> 
       <div class="col-sm-9"> 
       <div id="AreaR1"></div> 
       </div> 
       <div class="col-sm-3"> 
       <div id="PieR1"></div> 
       </div> 
      </div><!-- .row --> 

    <script type="text/javascript"> 

    function drawChartsR() 
    { 
     var view; 

     var AreaOpt = { 
     height: 200, 
     legend: { position: 'bottom', maxLines: 1 }, 
     }; 

     var PieOpt = { 
     height: 200, 
     legend: { position: 'bottom', maxLines: 1 } 
     }; 

     view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]])); 
     view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]); 
     (new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt); 

     view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]])); 
     (new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt); 
    } 

    </script> 

      </div> 
     </div><!-- .tab-content --> 

     </div><!-- .thumbnail --> 
    </div><!-- .col --> 

    </div><!-- .row --> 

</div><!-- .container --> 

<script type="text/javascript"> 

    google.charts.load("current",{callback:drawChartsB,packages:["corechart"]}); 

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     switch ($(e.target).html()) { 
     case 'Bus': 
      drawChartsB(); 
      break; 

     case 'Res': 
      drawChartsR(); 
      break; 
     } 
    }); 

</script>