2016-11-18 4 views
0

ブートストラップカルーセルにHighcartsを使ってグラフを追加しようとしました。私はちょうど2つのグラフを追加し、2つの異なるスライダーの中に入れ、私はそれを実行すると、最初のスライドは大丈夫だが、次のスライドでは、グラフの幅が小さくなった。私はhereで見つけた他の回避策を試しましたが、喜びはありませんでした。ブートストラップカルーセルに追加したときのハイチャートの問題

HTML:

<div id="chart-slider" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#chart-slider" data-slide-to="0" class="active"></li> 
     <li data-target="#chart-slider" data-slide-to="1"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <div id="chart-two" class="chart-container"></div> 
    </div> 

    <div class="item" class="chart-container"> 
     <div id="chart-three"></div> 
    </div> 
    </div> 

答えて

0

私は、例えば、ブートストラップカルーセルでiframeのようにそれを埋め込み、シンプルなプレーンなHTMLファイルでチャートを配置しようとします:

<div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <iframe src="your-chart1.html"></iframe> 
     </div> 
     <div class="item" class="chart-container"> 
     <iframe src="your-chart2.html"></iframe> 
     </div> 
</div> 
+1

素敵なアイディア!私はスライドイベントをhighchartsの 'reflow()'にバインドすることで問題を解決しました – claudios

+0

@claudios解決策を投稿して受け入れるなら、問題は解決しないでしょう。 – morganfree

+0

@morganfree、はい私はここに投稿します。ありがとう – claudios

関連する問題