Question

我有一个高图表作为bootstrap轮播中第二个项目的内容div内容。如果它在第一个旋转木马幻灯片/项目上，它会调整大小。但是，如果高图位于第二张幻灯片上，则在滑入时不会调整大小。

如果不是第一个可见的轮播幻灯片/项目，我该如何自动回复轮播内容？

这是jsfiddle - ＆gt; 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; 
}

Answer 1

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

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

通过将slid事件（表示轮播的已完成幻灯片的信号）绑定到图表的setSize()方法，图表可以正确调整大小。

两点：

当幻灯片完成时，您会看到图表实际上会改变大小，这是一种视觉效果。
我尝试使用container.height和container.width进行动态调整，但这根本没有影响硬编码的大小。不理想，但至少我的图表大小合适。

Answer 2

我知道这是一个老问题，但我偶然发现了同样的问题并找到了使用Highcharts reflow函数的解决方案。

如果所有图表都有类container-main，您可以执行以下操作：

$('.carousel').carousel().on('slide.bs.carousel', function (e) {
    setTimeout(function(){
        $('.container-main').each(function(){
            $(this).highcharts().reflow();
        });
    }, 1);
});

希望这会对某人有所帮助。

bootstrap轮播中的Highcharts内容不会自动调整为carousel

2 个答案: