在引导轮播中加载多个谷歌图表
Posted
技术标签:
【中文标题】在引导轮播中加载多个谷歌图表【英文标题】：loading multiple google chart inside bootstrap carousel 【发布时间】：2021-06-26 08:29:25 【问题描述】：我创建了一个引导轮播来说明我们公司的数据。在这个轮播中，我有引导表、图片和两个谷歌图表（饼图和堆积条形图）。
如果我没有为谷歌图表保留活动类，它们将无法正确加载，有时图表大小会更改，或者有时图例不会显示。如果我使饼图处于活动状态，则它可以正常工作，但是堆叠图会显示图例丢失等问题，如果我使堆叠图处于活动状态，则饼图会显示问题。为什么会这样？
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", packages:["corechart"]);
google.charts.setOnLoadCallback(drawChart);
function drawChart()
var data = google.visualization.arrayToDataTable([
['STATES', 'MONTHLY REVENUE'],
['1', 557988],
['2', 723948],
['3', 1157887]
]);
var options =
title: 'MONTHLY REVENUE',
is3D: true,
pieSliceText: 'value',
fontSize: 15,
chartArea:
left: "3%",
top: "10%",
height: "90%",
width: "90%"
,
legend: position: 'labeled'
;
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
</script> <!-- google pie chart ends -->
<!-- google slack chart -->
<script type="text/javascript">
google.charts.load("current", packages:["corechart"]);
google.charts.setOnLoadCallback(drawChart_);
function drawChart_()
var data = google.visualization.arrayToDataTable([
['STATES', 'MALE', 'FEMALE', role: 'annotation' ],
['1', 240680, 317308, ''],
['2', 292141, 431807, ''],
['3', 401784, 756103, '']
]);
var view = new google.visualization.DataView(data);
var options =
title: "POPULATION",
width: 1100,
height: 650,
legend: position: 'top', maxLines: 5, textStyle: fontSize: 15 ,
bar: groupWidth: '90%' ,
isStacked: true
;
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
</script>
<!-- google slack chart ends -->
</head>
<body>
<div class="d-flex flex-lg-column mb-3">
<div class="p-2 bg-info">
<div id="carouselBigImage" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<div class="table-responsive-lg table-bordered">
<table class="table" style="font-weight: bold;font-size: 20px;caption-side:top;">
<!-- table data -->
</div>
</div>
<div class="carousel-item active">
<div id="piechart_3d" style="width:100%; height:650px;"></div>
</div>
<div class="carousel-item ">
<div id="barchart_values" style="width:100%; height:650px;"></div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Offc.png" >
</div>
</div>
</div>
</div> <!-- p-2 bg-info -->
</div> <!-- d-flex flex-lg-column mb-3 closed -->
</body>
【问题讨论】：
这是图表在隐藏容器中绘制的结果，第一次绘制需要等到图表显示出来。 @WhiteHat 谢谢你的评论。但是我没看懂你的回复。请你能详细说明一下。这将有很大的帮助。 【参考方案1】：几件事...
每次页面加载只需加载一次谷歌图表， 每个绘制的图表都不是一次。
在隐藏容器中绘制时，图表无法正确计算图表元素的位置。
在这里，图表位于隐藏容器中，直到轮播显示。
因此您需要等到图表显示后才能第一次绘制。
为此，您可以使用 "on slid" 事件 --> 'slid.bs.carousel'
看下面的sn-p...
google.charts.load('current',
packages: ['corechart']
).then(function ()
// pie chart
var dataPie = google.visualization.arrayToDataTable([
['STATES', 'MONTHLY REVENUE'],
['1', 557988],
['2', 723948],
['3', 1157887]
]);
var optionsPie =
title: 'MONTHLY REVENUE',
is3D: true,
pieSliceText: 'value',
fontSize: 15,
chartArea:
left: '3%',
top: '10%',
height: '90%',
width: '90%'
,
legend: position: 'labeled'
;
var chartPie = new google.visualization.PieChart(document.getElementById('piechart_3d'));
// bar chart
var dataBar = google.visualization.arrayToDataTable([
['STATES', 'MALE', 'FEMALE', role: 'annotation' ],
['1', 240680, 317308, ''],
['2', 292141, 431807, ''],
['3', 401784, 756103, '']
]);
var viewBar = new google.visualization.DataView(dataBar);
var optionsBar =
title: 'POPULATION',
width: 1100,
height: 650,
legend: position: 'top', maxLines: 5, textStyle: fontSize: 15 ,
bar: groupWidth: '90%' ,
isStacked: true
;
var chartBar = new google.visualization.BarChart(document.getElementById('barchart_values'));
// carousel slid event
$('#carouselBigImage').on('slid.bs.carousel', function (sender)
// draw chart that is shown
var container = $(sender.relatedTarget).find('div');
switch (container.prop('id'))
case 'barchart_values':
chartBar.draw(viewBar, optionsBar);
break;
case 'piechart_3d':
chartPie.draw(dataPie, optionsPie);
break;
);
);
【讨论】：
以上是关于在引导轮播中加载多个谷歌图表的主要内容，如果未能解决你的问题，请参考以下文章