在bootstrap旋转木马中加载多个谷歌图表 [英] loading multiple google chart inside bootstrap carousel
问题描述
我创建了一个自举轮播，以说明我们公司的数据.在此轮播中，我有引导表，图片和两个Google图表(饼图和堆积条形图).
I have created a bootstrap carousel to illustrate the data of our company. In this carousel, I have bootstrap table, pics and two google charts (pie chart and stacked bar chart).
如果我没有为Google图表保持活动状态，则它们无法正确加载，有时图表大小会更改，有时不会显示图例.如果我使饼图处于活动状态，则可以正常工作，但是堆叠图会出现诸如图例丢失的问题；如果使堆叠图处于活动状态，则饼图会出现问题.为什么会这样?
If I do not keep active class for the google chart they are not loading properly, sometimes chart size is changed or sometimes legend are not shown. If I make pie chart active then it work fine but then stacked chart shows problem like legend missing and if I make stacked chart active then pie chart shows problem. Why is it so?
<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>
推荐答案
耦合事物...
-
google图表每次加载一次仅需加载一次，
每个图表绘制一次.
google charts only needs to be loaded once per page load,
not once per chart drawn.
在隐藏容器中绘制时，图表无法正确计算图表元素的位置.
在这里，图表在隐藏的容器中，直到轮播显示为止.
因此您需要等到图表显示后才能进行首次绘制.
为此，您可以使用滑动"事件->'slid.bs.carousel'
the chart cannot properly calculate placement of chart elements when drawn in a hidden container.
here, the charts are in a hidden container until shown by the carousel.
so you need to wait until the chart is shown before drawing for the first time.
to do so, you can use the "on slid" event --> 'slid.bs.carousel'
请参阅以下代码段...
see following snippet...
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;
}
});
});
这篇关于在bootstrap旋转木马中加载多个谷歌图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
