Question

我正在使用google donut图表和bootstrap标签。它在第一页中正确加载，但是当我单击另一个选项卡时，它不显示图表并给出错误消息“无法读取属性'长度'为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 */

Google图表无法在引导标签上运行

1 个答案: