Question

我在我的网络应用程序上使用轮播。目前我有两个图表，当用户点击下一个箭头时，第二个图表如demo here.所示第二个图形宽度和高度减少了。我无法弄清楚如何修复宽度和高度，以便在点击下一个箭头时不会减小。我已经浏览了这个链接Bootstrap carousel resizing image但它并没有为我工作。请告知如何在旋转木马时修正宽度和高度（当使用旋转木马然后尺寸减小到第二个显示的图形时，如上面的演示所示。

js code：

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">

      <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>

      </ol>
      <div class="carousel-inner">
     <div id='id1' class="item active">
      <table style="width:100%;height:80%;">
      <tr>
     <td id="id1td"  ng-controller="myController1">
      <div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
   </td>
    </tr>
    </table>

    </div>

    <div id='id2' class="item" ng-controller="myController2">
    <table style="width:100%;height:90%;">
      <tr style="height:5%;">
       <td>
         <h1>Title and some content goes here----</h1>
         </td>
    <tr style="height:85%;">

    <td id="id2td">
    <div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
    </td>
    </tr>
    </table>

    </div>

    </div> 

      <!-- Left and right controls -->
       <span class="left carousel-control" href="#myCarousel" data-slide="prev" >
                                         <span class="glyphicon glyphicon-chevron-left"></span>
                                     </span>
                                     <span class="right carousel-control" href="#myCarousel" data-slide="next">
                                         <span class="glyphicon glyphicon-chevron-right"></span>
        </span>
</div>

Answer 1

您可以尝试将选项宽度和高度设置为图表区域：

chartArea: {
            'height': '200',
            'width': '200'
        }

用于修复宽度和高度的css代码 - bootstrap

1 个答案: