График Google не работает на вкладке начальной загрузки

Question

Я использую диаграмму google goot с вкладкой начальной загрузки. Он правильно загружается на первой странице, но когда я нажимаю на другую вкладку, он не отображает диаграмму и не выдает сообщение об ошибке «Невозможно прочитать длину свойства« null ». Мои коды ниже. Пожалуйста, помогите мне, если у кого-нибудь есть идея.

<ul id="myTab1" class="nav nav-pills nav-justified"> 
    <li class="active"><a href="#cons18" data-toggle="tab">18</a></li> 
    <li><a href="#cons31" data-toggle="tab">31</a></li> 
</ul> 

    <div class="panel-heading"> 
     <div id="myTabContent" class="tab-content"> 
      <div class="tab-pane fade in active" id="cons18"> 
       <div class="row"> 
<div class="well" id="donutchart_cons18" style="width: 100%; height: 24.5em;"></div> 
       </div> 
      </div> 

      <div class="tab-pane fade" id="cons31"> 
       <div class="row"> 
<div class="well" id="donutchart_cons31" style="width: 100%; height: 24.5em;"></div> 
       </div> 
      </div> 

     </div> 
    </div> 

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart1); 
    function drawChart1() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Items', 'Percentage'], 
     ['Fruit1',  40], 
     ['Fruit2',  10], 
     ['Fruit3', 35], 
     ['Fruit4', 10], 
     ['Fruit5', 5] 
    ]); 

    var options = { 
     title: 'Fruits: 18 to 30', 
     pieHole: 0.4, 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('donutchart_cons18')); 
    chart.draw(data, options); 
    } 
</script> 


<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart2); 
    function drawChart2() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Items', 'Percentage'], 
     ['Fruit1',  40], 
     ['Fruit2',  10], 
     ['Fruit3', 35], 
     ['Fruit4', 10], 
     ['Fruit5', 5] 
    ]); 

    var options = { 
     title: 'Fruits: 31 to 50', 
     pieHole: 0.4, 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('donutchart_cons31')); 
    chart.draw(data, options); 
    } 
</script> 

Answer 1

Полученный раствор из ryenus. Спасибо ему. Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

/* bootstrap hack: fix content width inside hidden tabs */ 
.tab-content > .tab-pane, 
.pill-content > .pill-pane { 
display: block;  /* undo display:none   */ 
height: 0;   /* height:0 is also invisible */ 
overflow-y: hidden; /* no-overflow    */ 
} 
.tab-content > .active, 
.pill-content > .active { 
height: auto;  /* let the content decide it */ 
} /* bootstrap hack end */