Using Bootstrap 4 Flexbox To Equally Divide Four Charts
I am trying to plot four different stacked charts in one browser window as shown here. But as it is, the size of the charts aren't equal. I have tried tweaking various CSS properti
Solution 1:
Remove inline height of 100% from the div just inside .col-6.bordered and add the following style.
.col-6.bordered > div {
height: 50vh;
}
.col-6.bordered>div {
height: 50vh;
}<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.custom-select-lg {
border: 2px solid #ccc;
height: 52px;
padding: 0 0 0 15px;
font-size: 125%;
width: 290px;
}
.vh-100 {
min-height: 100vh;
}
.choose-plot {
padding-top: 15px;
padding-bottom: 15px;
}
.bordered {
border: 1px solid #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container-fluid d-flex h-100 flex-column vh-100">
<div class="row">
<div class="col choose-plot">
<strong class="mb-2">Instruction here</strong>
<div class="row">
<div class="col-1">
<button id="load_plot" class="btn btn-primary btn-lg">Load plot</button>
</div>
</div>
</div>
</div>
<div class="row flex-fill d-flex justify-content-start">
<div class="col-6 bordered">1 of 4
<div id="container-0"></div>
</div>
<div class="col-6 bordered">2 of 4
<div id="container-1"></div>
</div>
<div class="col-6 bordered">3 of 4
<div id="container-2"></div>
</div>
<div class="col-6 bordered">4 of 4
<div id="container-3" "></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js " integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin=" anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js " integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9 " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js "></script>
<script>
var doms = [
document.getElementById("container-0 "),
document.getElementById("container-1 "),
document.getElementById("container-2 "),
document.getElementById("container-3 "),
];
var myCharts = [];
var myOption = {
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
legend: {
data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '直接访问',
type: 'bar',
stack: 'a',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: 'a',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: 'a',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: 'a',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: 'a',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
}; //myOption ends
$('#load_plot').on('click', function() {
if (myCharts.length != 0) {
myCharts.forEach(function (c) {
c.dispose();
});
}
doms.forEach(function(ele){
var curChart = echarts.init(ele, null, {renderer: 'canvas'});
curChart.showLoading();
curChart.setOption(curOption = myOption);
curChart.hideLoading();
console.log("done loading ");
myCharts.push(curChart);
});
});
</script>
</body>
</html>See updated fiddle
Solution 2:
The default definition is min-height:1px
whats mean that the height will be automatic as the height of the content
For provide it you can set height: 100vh;
.bordered{
height: 100vh;
}
Post a Comment for "Using Bootstrap 4 Flexbox To Equally Divide Four Charts"