0
まず、本当に助けていただきありがとうございます。私は、スライドショーの仕組みとして、ブートストラップカルーセルを使ってチャートのスライドショーを作成しようとしています。また、各スライドにアニメーションを表示するためのチャートが必要です。現在、chart.jsはすべての表示をグラフ化していますが、最初のスライドだけがグラフのアニメーションを表示しています（これはページロード時に最初に表示されるグラフだと思います）。残りのスライドはグラフを表示しますが、グラフはアニメートされません。Chart.jsのグラフは、ブートストラップカルーセルの内部でアニメーション化されません
TL; DRスライドをカルーセルで表示するたびに、アニメーションを表示するようにしたいと考えています（現在、最初のスライドのみがグラフアニメーションを表示しています）。ここで
HTMLコード
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel page location indicator -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
<!-- carousel -->
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="item active">
<div class="container">
<h1>Chart 1</h1>
<h4>Chart 2</h4>
<div class="row">
<div class="col-xs-4">
<canvas class="chart" id="chart1Ratings" width="200" height="200"></canvas>
</div>
<div class="col-xs-4">
<canvas class="chart" id="chart1Overall" width="200" height="200"></canvas>
</div>
<div class="col-xs-4">
<img style="margin-top: 110px; border-radius: 50%; object-fit: contain;" width="250" height="250" src="http://prod.static.bears.clubs.nfl.com/nfl-assets/img/schedule-list/logos/helmet-right-weather-mascot-248x220/day/sunny/bears.png" alt="First slide">
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="item">
<div class="container">
<h1>Chart 2</h1>
<h4>Chart 2</h4>
<div class="row">
<div class="col-xs-4">
<canvas class="chart" id="chart2Ratings" width="200" height="200"></canvas>
</div>
<div class="col-xs-4">
<canvas class="chart" id="chart2Overall" width="200" height="200"></canvas>
</div>
<div class="col-xs-4">
<img style="margin-top: 120px; border-radius: 50%; object-fit: contain;" width="250" height="250" src="player_pics/slide2Pic.png" alt="Second slide">
</div>
</div>
</div>
</div>
<!-- Arrows -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
CSSです：
.glyphicon {
font-size: 500px;
}
body {
/*background: #b71220!important;*/
background-image: url("https://epicattorneymarketing.com/wp-content/uploads/2015/10/football-field-stripes-1.jpg");
background-size: cover;
}
ul {
list-style: none;
text-align: center;
}
ul > li > h1 {
color: white;
}
body > div > div > div:nth-child(1) > ul > li:nth-child(1) > h1 {
font-size: 40px;
}
canvas.chart {
width: 100%!important;
height: 50%!important;
margin-top: 80px;
}
.container{
background-color: rgba(235, 234, 238, 0.9);
margin-top: 80px;
padding-bottom: 20px;
margin-bottom: 80px;
}
.carousel-control{
margin-bottom: 400px;
background-image: none !important;
color: black !important;
}
.carousel-indicators{
margin-bottom: 37px;
}
h1, h4{
text-align: center;
/*margin-top: 80px;*/
}
のJavaScript（私はスライドごとに異なるグラフを作成するために、各スライドのために、このようなさまざまなスクリプトを持っている）ここでの例であります：
//Chart 1: Ratings
var ctx = document.getElementById('chart2Ratings').getContext('2d');
Chart.defaults.global.animation.duration = 7000;
Chart.defaults.global.defaultFontColor = 'black';
Chart.defaults.global.defaultFontStyle = 'bold';
var Chart1 = new Chart(ctx, {
// The type of chart we want to create
type: 'horizontalBar',
// The data for our dataset
data: {
labels: ["Speed", "Agility", "Strength", "Effort", "Passing", "Football IQ"],
datasets: [{
label: "Rating",
backgroundColor: 'rgb(5, 254, 229)',
borderColor: 'rgb(5, 254, 229)',
data: [99, 99, 80, 80, 99, 99],
}]
},
// Configuration options go here
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Chart 2: overall
var cty = document.getElementById('chart2Overall').getContext('2d');
Chart.defaults.global.animation.duration = 5000;
// Chart.defaults.global.title.display = true;
// Chart.defaults.global.title.text = 'Overall Rating: 99';
// Chart.defaults.global.title.fontSize = 30;
var Chart2 = new Chart(cty, {
type: 'doughnut',
data: {
// labels: ['Overall Rating', ''],
datasets: [{
backgroundColor: ['rgb(2, 249, 90)', 'rgb(206, 3, 86'],
borderColor: 'rgb(2, 249, 90)',
data: [99, 1]
}]
},
options: {
scales: {
ticks: {
beginAtZero: true
}
},
tooltips: {
enabled: false
},
title: {
display: true,
text: "Overall Rating: 99",
fontSize: 30
}
}
});
$('#myCarousel').carousel({
interval: 10000
});
$('#myCarousel').on('slid.bs.carousel', function() {
Chart1.render();
Chart2.render();
})
TL; DR
$('#myCarousel').on('slid.bs.carousel', function() {
Chart1.render();
Chart2.render();
})
^これはカルーセルで矢印をクリックするたびにグラフを再アニメーション化するための技術でした。しかし、それは動作していません。私はまた、運のないチャートのデータを更新しようとしました。私はまた、上記の関数で新しいチャートを作成して破壊しようとしましたが、これは最初は機能しますが、何らかの理由でチャートのフォントサイズがすべて歪んだり、チャートがひどく見えます（アニメーション化します）。
別の方法として、新しいスライドに移動するたびにページを更新することができますが、スライド1に戻す方法があります。そして、私はそれらを見ることができないので、各スライド上のアニメーションのすべてがリフレッシュ時に再アニメーション化されるかどうかを知る方法がありません。
もう一度、本当にすべての助けに感謝します！
短編では、チャートが各スライドにアニメーションを表示するブートストラップカルーセルにチャートを配置する方法を説明します。