宽度和高度设置最佳比例、单位及响应式的问题

[cuiwenyuan]

用了BootStrap的前端，再用G2的时候，设定的高度和宽度一直不起作用，另外怎么实现响应式的宽度和高度（保持长宽比例）？

[nmazing]

我也遇到同样问题

[nmazing]

我找到了解决方法，已经解决了Bootstrap响应式自适应宽度的方法，加入resize事件

[dxq613]

宽高保持比例其实在具体的项目中不常见，一般都是保持高度，根据窗口大小自适应宽度。

有两种方案：

方案一：

 var chart = new G2.Chart({
  id: 'mountNode',  // 指定图表容器 ID
  height : 300,     // 指定图表高度
  forceFit: true,
});

方案二：

自己监听resize事件，调用chart.changeSize(width,height)

[nmazing]

bootstrap响应式，多个tab下，监听了resize事件。

• tab1下的图表forcefit为true，正常自适应没问题。
• 重点就是之后的tab2/3/4，如果forcefit为true，那么tab2/3/4不显示，如果forcefit为false，就不是自适应了，要自定义宽度。
• 查找了很长时间原因，目前Issues比较少，暂未解决。

`

人口属性标签

                                          <ul class="nav nav-tabs nav-justified" id="menu">
                                              <li class="active">
                                                  <a href="#tab1" data-toggle="tab"> 年龄标签 </a>
                                              </li>
                                              <li>
                                                  <a href="#tab2" data-toggle="tab"> 性别标签 </a>
                                              </li>
                                          </ul>

                                       <!--人口属性画像-->
                                       <div class="tab-content">
                                         <!--人口属性Tab1-->
                                           <div class="tab-pane fade active in" id="tab1">

                                        <div id="c1" class="chart" style="height: 525px;"> </div>
                                    <title>G2饼图</title>
                                    <link rel="stylesheet" type="text/css" href="https://as.alipayobjects.com/g/datavis/g2-static/0.0.12/doc.css" />
                                    <!--如果不需要jquery ajax 则可以不引入-->
                                    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
                                    <script src="https://a.alipayobjects.com/alipay-request/3.0.3/index.js"></script>
                                    <script src="../admin/jquery.tabify.js"></script>
                                    <script src="../admin/jquery.js" type="text/javascript" charset="utf-8"></script>

                                    <!-- 引入 G2 脚本 --><script src="https://as.alipayobjects.com/g/datavis/g2/1.2.6/index.js"></script>
                                       <!-- G2 code start -->
                                       <script type="text/javascript">
                                       x=0;
                                       $(document).ready(function(){
                                         $(window).resize(function() {
                                         });
                                       });
                                       </script>
                                    <script>
                                       var data = [
                                         {name: '60前', value: 10},
                                         {name: '60后', value: 20},
                                         {name: '70后', value: 10},
                                         {name: '80后', value: 15},
                                         {name: '85后', value: 35},
                                         {name: '95后', value: 5},
                                         {name: '00后', value: 5}
                                      ];
                                      var Stat = G2.Stat;
                                      var chart = new G2.Chart({
                                         id: 'c1',
                                         width: 1000,
                                         height: 500,
                                         forceFit : true
                                      });
                                      chart.source(data);
                                      // 重要：绘制饼图时，必须声明 theta 坐标系
                                      chart.coord('theta', {
                                        radius: 0.8 // 设置饼图的大小
                                      });
                                      chart.legend('bottom');
                                      chart.intervalStack()
                                       .position(Stat.summary.percent('value'))
                                       .color('name')
                                       .label('name*..percent',function(name, percent){
                                       percent = (percent * 100).toFixed(2) + '%';
                                       return name + ' ' + percent;
                                      });
                                      chart.render();
                                     // 设置默认选中
                                     var geom = chart.getGeoms()[0]; // 获取所有的图形
                                     var items = geom.getData(); // 获取图形对应的数据
                                       geom.setSelected(items[1]); // 设置选中
                                    </script>
                                      <!-- G2 code end -->
                                    </div>
                                    <!--人口属性Tab1-->
                                    <!--人口属性Tab2-->
                                      <div class="tab-pane fade" id="tab2">
                                   <div id="c11" class="chart" style="height: 525px;"> </div>
                               <title>G2饼图</title>
                               <link rel="stylesheet" type="text/css" href="https://as.alipayobjects.com/g/datavis/g2-static/0.0.12/doc.css" />
                               <!--如果不需要jquery ajax 则可以不引入-->
                               <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
                               <script src="https://a.alipayobjects.com/alipay-request/3.0.3/index.js"></script>
                               <!-- 引入 G2 脚本 --><script src="https://as.alipayobjects.com/g/datavis/g2/1.2.6/index.js"></script>
                                  <!-- G2 code start -->
                                  <script type="text/javascript">
                                  x=0;
                                  $(document).ready(function(){
                                    $(window).resize(function() {
                                    });
                                  });

                                  </script>
                               <script>
                                  var data = [
                                    {name: '男', value: 67},
                                    {name: '女', value: 33}
                                 ];
                                 var Stat = G2.Stat;
                                 var chart = new G2.Chart({
                                    id: 'c11',
                                    width: 600,
                                    height: 500,
                                    forceFit : false
                                 });
                                 chart.source(data);
                                 // 重要：绘制饼图时，必须声明 theta 坐标系
                                 chart.coord('theta', {
                                   radius: 0.8 // 设置饼图的大小
                                 });
                                 chart.legend('bottom');
                                 chart.intervalStack()
                                  .position(Stat.summary.percent('value'))
                                  .color('name')
                                  .label('name*..percent',function(name, percent){
                                  percent = (percent * 100).toFixed(2) + '%';
                                  return name + ' ' + percent;
                                 });
                                 chart.repaint();
                                 chart.render();
                                // 设置默认选中
                                var geom = chart.getGeoms()[0]; // 获取所有的图形
                                var items = geom.getData(); // 获取图形对应的数据
                                  geom.setSelected(items[1]); // 设置选中
                               </script>
                                 <!-- G2 code end -->
                               </div>
                               <!--人口属性Tab2-->
                                  </div>                                      
                                  </div>
                            </div>
                    </div>`

[dxq613]

tab设置forceFit出问题的原因在于：

• 图表在窗口宽度发生改变时，通过计算父容器的宽度来设置自己的宽度，由于tab的内图表的如容器是隐藏的所以无法计算合适的宽度

所以你使用tab的时候如果要自适应宽度的话，有两个方案：

• 所有的tab公用同一个图表，切换tab时，更改图表的数据和语法

  chart.clear();
  chart.source(data);
  chart.line()...
  
  chart.rener();
  

• tab切换后，调用chart的 forceFit方法，此时会重新进行宽度的计算

chart.forceFit();