Я хочу нарисовать диаграммы и применить к ним карусель.Я использую CanvasJS для этого.Но я не получаю никакого вывода.Я не вижу никаких графиков.Я использую Bootstrap 4.1.3.
До этого я пытался использовать Google Charts, но я не знаю, как применить к ним карусель.Я хочу несколько графиков подряд с каруселью.Я не смог найти ничего, связанного с применением карусели в Google Charts, поэтому я переключился на CanvasJS, но ничего не работает.
Пожалуйста, помогите мне с CanvasJS или с Google Charts.
Ниже приведен мой код CanvasJS:
CSS:
.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;
}
HTML AND JS / JQuery:
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<div id="chartContainer1" class="chart" style="width:100%;
height:360px;"></div>
</div>
<div class="carousel-item">
<div id="chartContainer2" class="chart" style="width:100%;
height:360px;"></div>
</div>
<div class="carousel-item">
<div id="chartContainer3" class="chart" style="width:100%;
height:360px;"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<script>
var chart;
var charts = [];
var width;
var height;
width = $('#demo').width();
height = $('#demo').height();
$('.carousel').carousel({
interval: false,
});
chart = new CanvasJS.Chart("chartContainer1", {
title: {
text: "Column Chart"
},
width: width,
height: height,
data: [{
type: "column",
dataPoints: [{
x: 10,
y: 171
}, {
x: 20,
y: 155
}, {
x: 30,
y: 150
}, {
x: 40,
y: 165
}, {
x: 50,
y: 195
}, {
x: 60,
y: 168
}, {
x: 70,
y: 128
}, {
x: 80,
y: 134
}, {
x: 90,
y: 114
}]
}]
});
chart.render();
charts.push(chart);
chart = new CanvasJS.Chart("chartContainer2", {
title: {
text: "Line Chart"
},
width: width,
height: height,
data: [{
type: "line",
dataPoints: [{
x: 10,
y: 71
}, {
x: 20,
y: 55
}, {
x: 30,
y: 50
}, {
x: 40,
y: 65
}, {
x: 50,
y: 95
} , {
x: 60,
y: 68
}, {
x: 70,
y: 28
}, {
x: 80,
y: 34
}, {
x: 90,
y: 14
}]
}]
});
chart.render();
charts.push(chart);
chart = new CanvasJS.Chart("chartContainer3", {
title: {
text: "Area Chart"
},
width: width,
height: height,
data: [{
type: "area",
dataPoints: [{
x: 10,
y: 71
}, {
x: 20,
y: 55
}, {
x: 30,
y: 50
}, {
x: 40,
y: 65
}, {
x: 50,
y: 95
}, {
x: 60,
y: 68
}, {
x: 70,
y: 28
}, {
x: 80,
y: 34
}, {
x: 90,
y: 14
}]
}]
});
chart.render();
charts.push(chart);
$(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();
}
});
</script>