2016-11-18 93 views
0

我試圖在引導程序輪盤上使用Highcarts添加圖表。我只添加了兩個圖表,並將其放置在兩個不同的滑塊內,當我運行它時,第一張幻燈片看起來不錯,但是在下一張幻燈片中,圖表的寬度變小。我嘗試了其他的解決方法,我發現在here但沒有喜悅。將Highchart問題添加到引導程序輪播中

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

我會嘗試把圖表中的簡單的純HTML文件,然後將其嵌入像引導旋轉木馬的iframe,例如:

<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

不錯理念!但我設法通過綁定幻燈片事件來修復它'reflow()' – claudios

+0

@claudios如果您發佈您的解決方案並接受它,那將是非常好的,所以問題不會保持開放。 – morganfree

+0

@morganfree,是的,我會在這裏發佈。謝謝 – claudios