Question

我创建了Bootstrap3标签RES和BUS。在这两个标签中的每个标签中，我想要定位两个Google图表（区域和饼图）。因此，在bootstrab tab-pane中，我将引导行放入列col-sm-9（对于较大的AreaChart）和col-sm-3（对于较小的PieChart）。

相同的内容在BUS和RES标签内！但第二个（RES）选项卡上的位置被毁了。为什么？以及如何解决它？

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

外部JSFiddle：enter link description here

Answer 1

在绘制图表之前需要等到容器可见，
或者需要在图表选项中设置特定的尺寸设置...

另外，建议只调用load语句一次......

尝试设置类似于以下内容......

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

将Google Charts定位在Bootstrap选项卡中

1 个答案: