引导轮播（或任何幻灯片）上的 ChartJS

时间：2021-03-15 01:22:51

标签： javascript twitter-bootstrap chart.js carousel

我正在尝试构建一个自动幻灯片放映，它将在仪表板页面中显示一些图表（大约 10 个图形）。为了使页面在电视中可读，我认为它应该一次显示一个图形，否则屏幕看起来会被这么多信息污染。我想以 5 秒的间隔创建此幻灯片以转到下一个条形图。如果是这种情况，我愿意使用另一个插件。到目前为止，我所做的是在这个片段上。

谢谢。

document.addEventListener('DOMContentLoaded', async function() {
  await getOrders();
});

async function getOrders() {
  do {
    var charts = [];
    var width;
    var height;

    width = $('#carousel-example-generic').width();
    height = $('#carousel-example-generic').height();

    $('.carousel').carousel({
      interval: false,
    });
    let response, data;
    let clientId = page.user.id;
    try {
      response = await fetch(apiServer + "orders/stat");
      data = await response.json();

      if (!response.ok) {
        page.notification.show("Error: " + data.result);
        break;
      }
    } catch (e) {
      page.notification.show("Error: Could not connect to the server.");
      break;
    }
    await createContainers(data.total_by_store);
    await populateContainers(data.total_by_store);
  } while (0);
}

function createContainers(total_by_store){
  let barCharts = document.getElementById("barCharts");
  let ol = document.querySelector('.carousel-indicators');
  let firstOne = true;
  for (let i=0; i < total_by_store.length; i++){
    let li = document.createElement('li');
    li.dataset.target = '#carousel-example-generic';
    li.dataset.slideTo = i;
    if (i == 0){
      li.classList.add('active');
    }
    ol.appendChild(li);
  }
  let carouselInner = document.querySelector('.carousel-inner');
  for (let storeOrders of total_by_store){
      let div1 = document.createElement('div');
      if (firstOne == true){
        div1.classList.add('active');
        firstOne = false;
      }
      div1.classList.add('item');
      let div2 = document.createElement('canvas');
      div2.setAttribute('id', 'store-'+storeOrders.store);
      div2.setAttribute('class', 'chart');
      div2.style.width = "100%";
      div2.style.height = "360px";
      div1.appendChild(div2);
      carouselInner.appendChild(div1);
  }
}

function populateContainers(total_by_store){
  var charts = [];
  var width;
  var height;

  width = $('#carousel-example-generic').width();
  height = $('#carousel-example-generic').height();

  $('.carousel').carousel({
    interval: false,
  });
  for (let storeOrders of total_by_store){
    let labels = Object.getOwnPropertyNames(storeOrders).slice(1);
    let labelsConverted = [];
    for (let label of labels){
      label = page.labelNames[label];
      labelsConverted.push(label);
    }
    let myChart = new Chart('store-'+storeOrders.store, {
      type: "bar",
      data: {
        labels: labelsConverted,
        datasets: [
          {
            label: stores[storeOrders.store].name,
            data: Object.values(storeOrders).slice(1),
            backgroundColor: getBackgroundColor(labelsConverted),
            borderColor:  getBorderColor(labelsConverted),
            borderWidth: 1
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: stores[storeOrders.store].name
        },
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              callback: function(value) {if (value % 1 === 0) {return value;} }
            }
          }],
          xAxes: [{
            barPercentage: 0.2,
          }]
        }
      }
    });
    myChart.render();
    charts.push(myChart);
  }
  $(window).resize(function() {
    for (var i = 0; i < charts.length; i++) {
      charts[i].options.width = $('.carousel').width();
      charts[i].options.height = $('.carousel').height();
      charts[i].render();
    }
  });
}
.carousel-control {
  position: absolute;
  top: 150px;
  left: 15px;
  width: 40px;
  height: 40px;
  //margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  background-image: none !important;
  filter: none !important;
  text-align: center;
  -webkit-border-radius: 23px;
     -moz-border-radius: 23px;
          border-radius: 23px;  
}

.glyphicon{
    font-size: 60px;
    color: black;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="css/orders.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="js/orders.js" type="module"></script> 
<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
<html>

更新：

That what my html looks like after the javascript runs, everything looks fine but the carousel does not work and all charts are shown on the page.

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="/common/buttons.css" rel="stylesheet" />
<link href="/client/css/home.css" rel="stylesheet" />
<link href="css/orders.css" rel="stylesheet" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="js/orders.js" type="module"></script> 
<body>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

  <div class="active item">
    <div class="chartjs-size-monitor">
      <div class="chartjs-size-monitor-expand">
        <div class=""></div>
      </div>
      <div class="chartjs-size-monitor-shrink">
          <div class=""></div>
      </div>
    </div>
    <canvas id="store-1" style="max-width: 600px; max-height: 400px; display: block; width: 600px; height: 300px;" width="600" height="300" class="chartjs-render-monitor"></canvas>
  </div>



  <div class="item"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div><canvas id="store-4" style="max-width: 600px; max-height: 400px; display: block; width: 600px; height: 300px;" width="600" height="300" class="chartjs-render-monitor"></canvas></div>
  <div class="item"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div><canvas id="store-7" style="max-width: 600px; max-height: 400px; display: block; width: 600px; height: 300px;" width="600" height="300" class="chartjs-render-monitor"></canvas></div>


  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
<html>

0 个答案:

没有答案
相关问题
最新问题