我的网页上有2个Google图表,它们位于Bootstrap 3 Carousel的2个独立项目中。在Carousel中的活动项目(幻灯片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正在正确加载,因为当我移动幻灯片时,我可以看到第二个图表的一瞥,因为它在滑动的过程中。
2条答案
按热度按时间9w11ddsr1#
您可能应该在
slid.bs.carousel
事件而不是slide.bs.carousel
事件上设置回调。前者在滑动和CSS转换完成后触发。后者在滑动开始时立即触发。图表库需要其显示区域完全可见,以便能够渲染,因此您需要前者。pu3pd22g2#
我在Bootstrap v5 carousel中使用Frappe Charts时遇到了类似的问题。我只是将控制bs滑块的css更改为notuse“display:none;"。请改用“visibility:hidden;”,这将允许图表在不可见时呈现。visibility属性允许元素在隐藏时占用空间。