Question

我的网页上有2个Google图表，这些图表位于Bootstrap 3 Carousel的2个独立项目中。旋转木马中活动项目（幻灯片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正在正确加载，因为当我移动幻灯片时，我可以看到第二张图表在滑动过程中的一瞥。

Answer 1

您应该在slid.bs.carousel事件而不是slide.bs.carousel事件上设置回调。滑动和CSS转换完成后，前者被触发。一旦滑动开始，后者就会解雇。图表库需要其显示区域完全可见才能呈现，因此您需要前者。

Bootstrap Carousel幻灯片2中的第2张Google图表无法显示

1 个答案: