Bootstrap Carousel幻灯片2中的第二个谷歌图表没有'不要出现

2nd Google chart in Bootstrap Carousel slide 2 doesn't show up

本文关键字：幻灯片 Carousel 谷歌 第二个 Bootstrap      更新时间：2023-09-26

我的网页上有两个谷歌图表，它们位于Bootstrap 3旋转木马的两个单独项目中。转盘中活动项目（幻灯片1）上的图表在屏幕上显示得很好，但不在活动列表上的图表（幻灯片2）即使在第二张幻灯片处于活动状态时也不会显示。

相关HTML如下：

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div id="piechart" class="col-sm-6 col-md-6 col-lg-12" style="height: 500px;"></div>
        </div>
        <div class="item">
            <div id="piecharts" class="col-sm-6 col-md-6 col-lg-12" style="height: 500px;"></div>
        </div>
        <div class="item">
            <div id="piechartss" class="col-sm-6 col-md-6 col-lg-12" style="height: 500px;"></div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

JS如下：

<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          alert('Helo');
          var data = google.visualization.arrayToDataTable([
              ['CreditorName', 'Balance Amount'],
          @For Each item In Model
              @:['@item.CreditorName', @item.BalanceAmount],
          Next
          ['Et',    0]
        ]);
        var options = {
          title: 'Creditors share in total debt.'
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
</script>

对于幻灯片2，我不确定什么时候调用它，但现在我使用的是：

$(document).ready(function () {
    $('#carousel-example-generic').on('slide.bs.carousel', function () {
        // do something…
        loadCharInfo(this);
    })
});

loadChartInfo为：

function loadChartInfo(carouselId)
{
    //google.setOnLoadCallback(drawCharts);
        google.load("visualization", "1", { packages: ["corechart"] });
        var data1 = google.visualization.arrayToDataTable([
      ['Chart2Q', 'Amount'],
      ['Chart2-1', 10000],
      ['Chart2-2', 10000],
      ['Chart2-3', 10000]
        ]);
        var options1 = {
            title: 'Chart 2.'
        };
        var chart1 = new google.visualization.PieChart(document.getElementById('piecharts'));
        chart1.draw(data1, options1);
}

我非常确信图表2加载正确，因为当我移动幻灯片时，我可以看到第二个图表正在滑动。

您可能应该将回调设置为slid.bs.carousel事件，而不是slide.bs.carousel事件。前者是在滑动和CSS转换完成后启动的。后者在滑行一开始就开火了。图表库需要其显示区域完全可见才能进行渲染，因此您需要前者。

我在Bootstrap v5旋转木马中使用Frappe Charts时遇到了类似的问题。我刚刚将控制bs滑块的css更改为而不是使用"显示：无&"；。相反，使用"；可见性：隐藏"这将允许在不可见的情况下呈现图表。可见性属性允许图元在隐藏的情况下占用空间。

.myclass .carousel-item {
  display: block; /* allow charts to render offscreen */
  visibility: hidden;
}
.myclass .carousel-item.active {
  visibility: initial;
}
相关文章：