Zunächst einmal schätze ich die Hilfe wirklich. Ich versuche eine Diashow von Diagrammen mit einem Bootstrap-Karussell als Mechanismus für die Diashow zu erstellen. Und ich möchte, dass die Charts Animationen auf jeder Folie zeigen. Momentan werden die chart.js-Diagramme alle angezeigt, aber nur die erste Folie zeigt die Animation der Diagramme an (ich denke, dies liegt daran, dass es das erste Diagramm ist, das beim Laden der Seite angezeigt wird). Der Rest der Folien zeigt die Diagramme, aber die Diagramme werden nicht animiert.Chart.js Diagramm wird nicht innerhalb Bootstrap Karussell animieren
TL; DR Ich möchte, dass die Diagramme ihre Animation jedes Mal anzeigen, wenn ihre Folie im Karussell angezeigt wird (derzeit zeigt nur die erste Folie die Diagrammanimation). Hier
ist der HTML-Code
<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 (Ich habe ein anderes Skript, wie dies für jede Folie ein anderes Diagramm für jede Folie zu erstellen) ist hier ein Beispiel :
//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();
})
^Dies war meine Technik, um die Charts neu zu animieren, wenn ein Pfeil im Karussell angeklickt wurde. Es funktioniert jedoch nicht. Ich habe auch versucht, die Daten in den Charts ohne Glück zu aktualisieren. Ich habe auch versucht, brandneue Charts in der obigen Funktion zu zerstören und zu erstellen, das funktioniert zunächst, aber aus irgendeinem Grund wird die Diagrammschriftgröße verzerrt und die Diagramme sehen absolut schrecklich aus (aber sie animieren).
Eine andere Technik könnte sein, die Seite jedes Mal neu zu laden, wenn ich auf eine neue Folie gehe, aber dann bringt mich das zurück auf Folie eins. Und ich kann nicht wissen, ob alle Charts, die auf jeder Folie animiert werden, bei der Aktualisierung neu animiert werden, weil ich sie nicht sehen kann.
Wieder schätze ich wirklich alle Hilfe!
Lange Rede, kurzer Sinn, wie man Diagramme in ein Bootstrap-Karussell legt, wo die Diagramme ihre Animation auf jeder Folie zeigen.