如何在使用Bootstrap Carousel和Chartkick時正確渲染圖表？

Question

的想法是使用一個轉盤和代替將圖像作爲其內容，使用圖（在此例中使用Chartkick）。頁面加載後的第一次，正好是第一容器上顯示的圖表呈現，沒有任何問題。但是，當我更換Carousel上的容器時，其他圖表顯得非常小，而且不在正確的位置。我注意到，當我手動調整網頁，圖表正確加載和其他的繼承問題，所以我認爲這是由於不能如期與我所期待的旋轉木馬的渲染協議。單擊Carousel上的按鈕時是否有任何強制頁面大小調整的方法？或者它是解決這個問題的另一種方法？ 預先感謝您。

Answer 1

我設法解決這個問題我想最初的方式。 這裏是萬一有人的代碼有同樣的問題：

的Javascript：

<script> 

     $(document).ready(function(){ 
      $("#myCarousel").carousel(); 

      // Enable Carousel Indicators 
      $(".item1").click(function(){ 
       $("#myCarousel").carousel(0); 

       // The next line of code triggers the listeners for the page-resizing 
       // event, which includes the carousel and will display the chart   
       // correctly. 

       window.dispatchEvent(new Event('resize')); 

      }); 
      $(".item2").click(function(){ 
       $("#myCarousel").carousel(1); 
       window.dispatchEvent(new Event('resize')); 
      }); 

     }); 

</script> 

HTML：

<ol class="carousel-indicators carousel-indicators-numbers"> 
    <li class="item1 active">1</li> 
    <li class="item2"  >2</li> 
</ol>