Bootstrap Carousel幻灯片2中的第二个谷歌图表没有'不要出现
2nd Google chart in Bootstrap Carousel slide 2 doesn't show up
我的网页上有两个谷歌图表,它们位于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;
}
相关文章:
- 幻灯片滚动javascript不起作用
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 创建具有可变长度幻灯片显示的幻灯片
- 通过幻灯片更改事件停止使用jquery的音频
- 不能在同一页上进行多个jquery幻灯片切换
- 我可以使此幻灯片图像自动播放吗?
- JS幻灯片与CSS背景颜色变化
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- jQuery图像幻灯片,在停止后淡出到第一张图像
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 如何移除或改进:在Bootstrap Carousel上聚焦风格
- JQuery幻灯片,可点击编号位置
- 如何在Slick Carousel中获取活动中的幻灯片元素
- 如何设置数据幻灯片到,就像我为每个.carousel-indicators li设置id一样
- 如何在 owl-carousel 幻灯片中查找视频元素,然后仅为该特定幻灯片设置 owl-carousel 控件的 cs
- 引导carousel:将jquery幻灯片更改为引导caroussel并绑定幻灯片函数
- Bootstrap Carousel幻灯片2中的第二个谷歌图表没有'不要出现
- 为什么我的Bootstrap Carousel没有从第二张幻灯片移动
- 在Bootstrap Carousel中切换鼠标上的幻灯片
- jQuery Boostrap Carousel根据当前幻灯片显示内容