javascript - 使用 Bootstrap Carousel 和 Chartkick 时如何正确渲染图表？

Question

想法是使用轮播而不是将图像作为内容，而是使用图表(在本例中使用 Chartkick)。首次加载页面时，出现在第一个容器上的图表会毫无问题地呈现。但是，当我在 Carousel 上更改容器时，其他图表显得非常小且位置不正确。我注意到，当我手动调整网页大小时，图表加载正确，而其他图表继承了这个问题，所以我认为这是由于 Carousel 的渲染协议(protocol)不符合我的预期。单击轮播上的按钮时，有什么方法可以强制调整页面大小？还是解决该问题的另一种方法？ 先感谢您。

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>