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

【问题标题】：How to render charts properly when using Bootstrap Carousel and Chartkick?使用 Bootstrap Carousel 和 Chartkick 时如何正确渲染图表？
【发布时间】：2017-07-04 20:22:10
【问题描述】：

我们的想法是使用轮播而不是将图像作为内容放置，而是使用图表（在本例中使用 Chartkick）。当页面第一次加载时，出现在第一个容器上的图表呈现没有任何问题。但是，当我在 Carousel 上更改容器时，其他图表显得非常小并且位置不正确。我注意到，当我手动调整网页大小时，图表正确加载并且其他图表继承了问题，所以我认为这是由于 Carousel 的渲染协议与我所期望的不一致。单击轮播上的按钮时，有什么方法可以强制调整页面大小？或者它是解决这个问题的另一种方法吗？先感谢您。

【问题讨论】：

标签： javascript css html carousel chartkick

【解决方案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>

【讨论】：