Css 在引导选项卡中定位Google图表_Css_Twitter Bootstrap 3_Google Visualization

Css 在引导选项卡中定位Google图表

css twitter-bootstrap-3 google-visualization

Css 在引导选项卡中定位Google图表,css,twitter-bootstrap-3,google-visualization,Css,Twitter Bootstrap 3,Google Visualization,我创建了Bootstrap3选项卡RES和BUS。在这两个选项卡中，我想定位两个谷歌图表（区域和饼图）。所以在bootstrab选项卡窗格中我将bootstrap行放入并将其拆分为列col-sm-9（对于较大的面积图）和col-sm-3（对于较小的面积图） BUS和RES选项卡中都有相同的内容！但第二个标签上的位置被破坏了。为什么？如何修复它标题巴士名称函数drawChartsB（） { var观点；变量AreaOpt={ 身高：200，图例：{位置：'bottom'，最

我创建了Bootstrap3选项卡

RES

和

BUS

。在这两个选项卡中，我想定位两个谷歌图表（区域和饼图）。所以在bootstrab

选项卡窗格中

我将bootstrap行放入并将其拆分为列

col-sm-9

（对于较大的面积图）和

col-sm-3

（对于较小的面积图）

BUS和RES选项卡中都有相同的内容！但第二个标签上的位置被破坏了。为什么？如何修复它


标题





巴士名称
函数drawChartsB（）
{
var观点；
变量AreaOpt={
身高：200，
图例：{位置：'bottom'，最大线：1}，
};
var PieOpt={
身高：200，
图例：{位置：'bottom'，最大线：1}
};
视图=新的google.visualization.DataView（google.visualization.arrayToDataTable（[[X'，'A'，'B']，[2017M02'，95,0]，[2017M03'，129,0]，[2017M04'，42,33]）；
setColumns（[0,1，{sourceColumn:1，角色：“注释”}，2，{sourceColumn:2，角色：“注释”}]）；
（新的google.visualization.AreaChart（document.getElementById（'AreaB1'））.draw（view，AreaOpt）；
视图=新的google.visualization.DataView（google.visualization.arrayToDataTable（[[X'，[AB']，[A'，42]，[B'，33]]）；
（新的google.visualization.PieChart（document.getElementById（'PieB1'））.draw（view，PieOpt）；
}
标题
函数drawChartsR（）
{
var观点；
变量AreaOpt={
身高：200，
图例：{位置：'bottom'，最大线：1}，
};
var PieOpt={
身高：200，
图例：{位置：'bottom'，最大线：1}
};
视图=新的google.visualization.DataView（google.visualization.arrayToDataTable（[[X'，'A'，'B']，[2017M02'，95,0]，[2017M03'，129,0]，[2017M04'，42,33]）；
setColumns（[0,1，{sourceColumn:1，角色：“注释”}，2，{sourceColumn:2，角色：“注释”}]）；
（新的google.visualization.AreaChart（document.getElementById（'AreaR1'））.draw（view，AreaOpt）；
视图=新的google.visualization.DataView（google.visualization.arrayToDataTable（[[X'，[AB']，[A'，42]，[B'，33]]）；
（新的google.visualization.PieChart（document.getElementById（'PieR1'））.draw（view，PieOpt）；
}
load（“当前”{回调：drawChartsB，包：[“corechart”]}）；
load（“当前”{回调：drawChartsR，包：[“corechart”]}）；

在绘制图表之前，需要等待容器可见，
或者需要在图表选项中设置特定的大小设置

另外，建议只调用一次

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>


标题





巴士名称
函数drawChartsB（）
{
var观点；
变量AreaOpt={
身高：200，
图例：{位置：'bottom'，最大线：1}，
};
var PieOpt={
身高：200，
图例：{位置：'bottom'，最大线：1}
};
视图=新的google.visualization.DataView（google.visualization.arrayToDataTable（[[X'，'A'，'B']，[2017M02'，95,0]，[2017M03'，129,0]，[2017M04'，42,33]）；
setColumns（[0,1，{sourceColumn:1，角色：“注释”}，2，{sourceColumn:2，角色：“注释”}]）；
（新的google.visualization.AreaChart（document.getElementById（'AreaB1'））.draw（view，AreaOpt）；
视图=新的google.visualization.DataView（google.visualization.arrayToDataTable（[[X'，[AB']，[A'，42]，[B'，33]]）；
（新的google.visualization.PieChart（document.getElementById（'PieB1'））.draw（view，PieOpt）；
}
标题
函数drawChartsR（）
{
var观点；
变量AreaOpt={
身高：200，
图例：{位置：'bottom'，最大线：1}，
};
var PieOpt={
身高：200，
图例：{位置：'bottom'，最大线：1}
};
视图=新的google.visualization.DataView（google.visualization.arrayToDataTable（[[X'，'A'，'B']，[2017M02'，95,0]，[2017M03'，129,0]，[2017M04'，42,33]）；
setColumns（[0,1，{sourceColumn:1，角色：“注释”}，2，{sourceColumn:2，角色：“注释”}]）；
（新的google.visualization.AreaChart（document.getElementById（'AreaR1'））.draw（view，AreaOpt）；
视图=新的google.visualization.DataView（google.visualization.arrayToDataTable（[[X'，[AB']，[A'，42]，[B'，33]]）；
（新的google.visualization.PieChart（document.getElementById（'PieR1'））.draw（view，PieOpt）；
}
load（“当前”{回调：drawChartsB，包：[“corechart”]}）；
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
开关（$（e.target.html（））{
“公共汽车”案例：
绘图b（）；
打破
案例“Res”：
德拉