Question

首先，我真的很感激帮助。我正在尝试使用引导轮播作为幻灯片放映的机制来制作图表幻灯片。我希望图表能够在每张幻灯片上显示动画。目前，chart.js图表全部显示，但只有第一张幻灯片显示图表＆＃39;动画（我认为这是因为它是页面加载时看到的第一个图表）。其余的幻灯片显示了图表，但图表没有动画。

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();
})

^这是我的技术，每次在旋转木马中点击箭头时触发图表重新制作动画。但是，它不起作用。我也尝试过更新图表中的数据而没有运气。我也尝试在上面的函数中销毁和创建全新的图表，这最初是有效的，但由于某种原因，图表字体大小变得非常扭曲，图表看起来非常糟糕（但它们会动画化）。

另一种技术可能是每次进入新幻灯片时刷新页面，但这会让我回到第一张幻灯片。而且我无法知道每张幻灯片上的所有图表是否在刷新时重新生成，因为我无法看到它们。

再次，我非常感谢所有的帮助！

长话短说，如何将chartjs图表放在bootstrap轮播中，图表在每张幻灯片上显示动画。

Answer 1

好的，所以我最终做的是使引导箭头href链接到新幻灯片的HTML模板。这样它将加载一个新页面（它正在加载新幻灯片），然后加载动画。这不是最有效的，但它是我能做的最好的。

Chart.js图表在bootstrap carousel

1 个答案:

Chart.js图表​​在bootstrap carousel

1 个答案:

Chart.js图表在bootstrap carousel