3

ブートストラップ カルーセル内の 2 番目のアイテムのコンテンツ div コンテンツとして高いチャートがあります。最初のカルーセル スライド/アイテムにある場合は、サイズが正常に変更されます。ただし、ハイチャートが 2 番目のスライドにある場合、スライドしてもサイズは変更されません。

最初に表示されるカルーセル スライド/アイテムでない場合、どうすればカルーセル コンテンツを自動サイズ変更できますか?

これが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()で、チャートのサイズが適切に変更されます。

2 つのポイント:

  1. スライドが完了すると、グラフのサイズが実際に変化する視覚効果があります。

  2. container.heightandを使用して動的なサイズ設定で解決しようとしましたcontainer.widthが、これはまったく効果がなかったため、サイズがハードコードされていました。理想的ではありませんが、少なくとも私のグラフは適切なサイズになります。

于 2013-09-01T22:10:39.780 に答える
1

古い質問であることは知っていますが、同じ問題に出くわし、ハイチャートのリフロー機能を使用して解決策を見つけました。

すべてのチャートに 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 に答える