【发布时间】：2018-09-23 20:23:27
【问题描述】：
我想绘制图表并在其上应用轮播。为此，我正在使用 CanvasJS。但我没有得到任何输出。我看不到任何图表。我正在使用引导程序 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 和 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>
【问题讨论】：
标签： jquery html charts bootstrap-4 canvasjs