Bootstrap 轮播中的 Highcharts 内容不会根据轮播自动调整大小

我有一个高图表作为引导程序轮播中第二个项目的内容 div 内容。如果它位于第一个轮播幻灯片/项目上，它的大小调整得很好。但是，如果高图表位于第二张幻灯片上，则滑入时不会调整大小。

如果不是第一个可见的轮播幻灯片/项目，如何自动调整轮播内容的大小？

这是 jsfiddle ->http://jsfiddle.net/ARYAv/ http://jsfiddle.net/ARYAv/

<div class="content" >
     <div class="hero-unit" >
         <div id="mainCarousel" class="carousel slide">
          <div class="carousel-inner">
            <div class="item active">
                <h2 style="padding-left: 22px">Hello1</h2>
                <div id="container2" class="container-main">click for next slide that doesn't autoresize</div>
                <a style="margin-left: 22px" href="#" class="btn btn-primary btn-large">Hello1 &raquo;</a>
            </div>
            <div class="item">
                <h2 style="padding-left: 22px">Hello2</h2>
                    <div id="container" class="container-main"></div>
                <a href="#" class="btn btn-primary btn-large">Hello2 &raquo;</a> 
            </div>
            </div>              
            <a class="left carousel-control" href="#mainCarousel" data-slide="prev" >&lsaquo;</a>
            <a class="right carousel-control" href="#mainCarousel" data-slide="next" >&rsaquo;</a>
     </div>
  </div>                
</div>

.container-main {
    display: block; 
    height: 540px; 
}

我遇到了同样的问题，并使用以下解决方案来调整图表的大小：

$('#chart-carousel').bind('slid', function() {
    $("#value-stats").highcharts().setSize(500, 350);
});

通过绑定slid事件 - 表示轮播已完成滑动 - 到setSize()图表的方法，图表会正确调整大小。

两点：

1. 当幻灯片完成时，您会看到图表实际上改变了大小，从而产生视觉效果。

2. 我尝试使用动态调整大小来解决这个问题container.height and container.width但这根本没有影响，因此硬编码了大小。不太理想，但至少我的图表大小合适。