问题描述
我正在尝试构建一个自动幻灯片放映，它将在仪表板页面中显示一些图表（大约 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>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）