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

bootstrap响应式，多个tab下，监听了resize事件。 tab1下的图表forcefit为true，正常自适应没问

tab设置forceFit出问题的原因在于：图表在窗口宽度发生改变时，通过计算父容器的宽度来设置自己的宽度，由于tab的内

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

antvis commented on May 7, 2024

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

from g2.

Comments (5)

dxq613 commented on May 7, 2024 2

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

有两种方案：

方案一：

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

方案二：

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

from g2.

nmazing commented on May 7, 2024

我也遇到同样问题

from g2.

nmazing commented on May 7, 2024

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

from g2.

nmazing commented on May 7, 2024

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

from g2.

dxq613 commented on May 7, 2024

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

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

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

所有的tab公用同一个图表，切换tab时，更改图表的数据和语法
```
chart.clear();
chart.source(data);
chart.line()...

chart.rener();
```
tab切换后，调用chart的 forceFit方法，此时会重新进行宽度的计算

chart.forceFit();

from g2.

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

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent