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><htmlstyle="height: 100%"><head><metacharset="utf-8"><linkrel="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: 00015px;
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><divclass="container-fluid d-flex h-100 flex-column vh-100"><divclass="row"><divclass="col choose-plot"><strongclass="mb-2">Instruction here</strong><divclass="row"><divclass="col-1"><buttonid="load_plot"class="btn btn-primary btn-lg">Load plot</button></div></div></div></div><divclass="row flex-fill d-flex justify-content-start"><divclass="col-6 bordered">1 of 4
<divid="container-0"></div></div><divclass="col-6 bordered">2 of 4
<divid="container-1"></div></div><divclass="col-6 bordered">3 of 4
<divid="container-2"></div></div><divclass="col-6 bordered">4 of 4
<divid="container-3" "></div></div></div></div><scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js "integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin=" anonymous "></script><scriptsrc="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><scriptsrc="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"