3

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

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

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

2 回答 2

1

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

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

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

两点：

  1. 当幻灯片完成时，您会看到图表实际改变大小，这是一种视觉效果。

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

于 2013-09-01T22:10:39.780 回答
1

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

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

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

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

于 2016-03-29T19:53:01.620 回答