Javascript 谷歌图表在引导选项卡上不起作用

我正在使用带引导标签的谷歌甜甜圈图表。它在第一页中正确加载，但当我单击另一个选项卡时，它不会显示图表，并给出错误消息“无法读取null的属性'length'。我的代码如下。如果有人有任何想法，请帮助我

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

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart1）；
函数drawChart1（）{
var data=google.visualization.arrayToDataTable([
[‘项目’、‘百分比’]，
[1'，40]，
[2'，10]，
[3'，35]，
[4'，10]，
['5'，5]
]);
变量选项={
标题:"水果:18至30",，
pieHole:0.4，
};
var chart=new google.visualization.PieChart（document.getElementById（'donutchart_cons18'）；
图表绘制（数据、选项）；
}
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart2）；
函数drawChart2（）{
var data=google.visualization.arrayToDataTable([
[‘项目’、‘百分比’]，
[1'，40]，
[2'，10]，
[3'，35]，
[4'，10]，
['5'，5]
]);
变量选项={
标题:"水果:31至50",，
pieHole:0.4，
};
var chart=new google.visualization.PieChart（document.getElementById（'donutchart_cons31'）；
图表绘制（数据、选项）；
}

从ryenus那里得到了解决方案。谢谢他。

---

如果您能创建一个JSFIDLE，那么应该将其标记为正确答案。即使在2017年，对我来说也是一种魅力。两天来，我一直在为这个标签和多个谷歌图表苦苦挣扎……回答得很好。我没有同样的问题，但它确实解决了。太棒了，非常感谢！谷歌搜索了很长时间，这是唯一有效的解决方案！2021年的工作太棒了

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

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