引导轮播中的 Highcharts 内容不会自动调整为轮播答案

【问题标题】：Highcharts content in bootstrap carousel is not auto-resizing to carousel引导轮播中的 Highcharts 内容不会自动调整为轮播
【发布时间】：2017-03-06 04:36:10
【问题描述】：

我在引导轮播中的第二个项目上有一个高图表作为内容 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; 
}

【问题讨论】：

因为您的问题出现在第二张幻灯片上阅读此stackoverflow.com/a/17115808/1596547
你的第二个容器，没有像第一个那样的'container-main'类。尝试添加这个并添加一个 width:100% like .container-main { height: 540px; width: 100%; }
问题是第二个元素有样式：display:none 所以当创建该图表的图表宽度为 NaN/0 -> 在这种情况下 Highcharts 图表的默认值为 600px。
这是一个更新的小提琴 -> jsfiddle.net/aPEVy/20 我添加了 display:block 但不行。我错过了什么？宽度：100% 似乎没有正确调整大小并跑出轮播。谢谢
不，我的意思是轮播中的项目不可见，请参阅：jsfiddle.net/aPEVy/25（项目已设置显示）- Highcharts 的容器可见，并且可以正常工作-当然在这种情况下轮播不不工作。你可以做什么？当轮播来到 Highcharts 时，使用 chart.setSize() 调整图表大小

标签： twitter-bootstrap highcharts

【解决方案1】：

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

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

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

两点：

当您看到幻灯片完成时图表实际改变大小时，会有一种视觉效果。
我尝试通过使用 container.height 和 container.width 的动态大小来解决它，但这根本没有效果，因此硬编码大小。不理想，但至少我的图表大小合适。

【讨论】：

【解决方案2】：

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

如果所有图表都有 container-main 类，你可以这样做：

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

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

【讨论】：