Bootstrap轮播中的Highcharts内容不会自动调整为轮播 [英] Highcharts content in bootstrap carousel is not auto-resizing to carousel

问题描述

我在自举轮播中的第二个项目上拥有高分辨率的内容div内容。如果它在第一个传送带上滑动/物品，它的尺寸就会很小。但是，如果highchart在第二张幻灯片上，它不会在滑入时调整大小。

？

以下是jsfiddle - > http：// jsfiddle。 net / ARYAv /

 < div class =content> 
< div class =hero-unit> 
< div id =mainCarouselclass =carousel slide> 
< div class =carousel-inner> 
< div class =item active> 
< h2 style =padding-left：22px> Hello1< / h2> 
< div id =container2class =container-main>点击下一张不自动调整大小的幻灯片< / div> 
< a style =margin-left：22pxhref =＃class =btn btn-primary btn-large> Hello1& raquo;< / a> 
< / div> 
< div class =item> 
< h2 style =padding-left：22px> Hello2< / h2> 
< div id =containerclass =container-main>< / div> 
< a href =＃class =btn btn-primary btn-large> Hello2& raquo;< / a> 
< / div> 
< / div> 
< a class =left carousel-controlhref =＃mainCarouseldata-slide =prev>& lsaquo;< / a> 
< a class =right carousel-controlhref =＃mainCarouseldata-slide =next>& rsaquo;< / a> 
< / div> 
< / div> 
< / div> 
 
 .container-main {
 display：block; 
 height：540px; 
} 
  

解决方案

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

  $（'＃chart-carousel'）。bind（'slid' （），
 $（＃value-stats）。 
  

绑定滑动事件 - 哪些信号一个完整的轮播幻灯片 - 到图表的 setSize（）方法，图表得到适当调整。

两点：$ b​​
$ b

1. 当幻灯片完成时，您会发现图表实际上会更改大小，我尝试使用 container.height 和容器来动态调整大小.width 但这完全没有影响，因此硬编码大小。不理想，但至少我的图表大小合适。

I have a high chart as content div content on a second item within bootstrap carousel. It resizes fine if its on the first carousel slide/item. However, if the highchart is on the second slide it doesn't resize when it slides in.

How can I autoresizse carousel content if not the first visible carousel slide/item?

Here is the 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; 
}

解决方案

I ran into the same problem and used the following solution to size my chart:

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

By binding the slid event - which signals a completed slide of the carousel - to the setSize() method of the chart, the chart gets resized properly.

Two points:

1. There's is a visual effect as you see the chart actually change size when the slide is completed.

2. I tried to work it out with dynamic sizing using container.height and container.width but this had no effect at all hence the hard coded sizes. Not ideal but at least my charts get properly sized.

这篇关于Bootstrap轮播中的Highcharts内容不会自动调整为轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！