使用Bootstrap 4 flexbox等分四个图表 [英] Using Bootstrap 4 flexbox to equally divide four charts

查看：304
本文介绍了使用Bootstrap 4 flexbox等分四个图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在一个浏览器窗口中绘制四个不同的堆积图表，如 here 所示。但实际情况是，图表的大小并不相同。我曾尝试调整各种CSS属性，但不熟悉CSS + HTML布局，我无法。



任何建议/帮助将不胜感激。



我的所有代码都在下面： 

 < ;！DOCTYPE html> 
< html style =height：100％> 
< head> 
< meta charset =utf-8> 
< link rel =stylesheethref =css / autocomplete-0.3.css/> 
< link rel =stylesheethref =https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.cssintegrity =sha384-WskhaSGFgHYWDcbwN70 / dfYBj47jz9qbsMId / iRN3ewGhXQFZCSftd1LZCfmhktB crossorigin = 匿名 > 
< 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>指示在此< / strong> 
< div class =row> 
< div class =col-1>


解决方案

从div内移除100％的内联高度 .col-6.bordered 并添加以下样式。

 。 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 =stylesheethref =https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.cssintegrity =sha384-WskhaSGFgHYWDcbwN70 / dfYBj47jz9qbsMId / iRN3ewGhXQFZCSftd1LZCfmhktBcrossorigin =anonymous > <风格> .custom-select-lg {border：2px solid #ccc;身高：52px;填充：0 0 0 15px; font-size：125％;宽度：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>此处的指示< / strong> < div class =row> < div class =col-1> < button id =load_plotclass =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> 4 of 4< div id =container-0>< / div> < / DIV> < div class =col-6 bordered> 4 of 4< div id =container-1>< / div> < / DIV> < div class =col-6 bordered> 4 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.jsintegrity =sha256-FgpCb / KJQlLNfOu91ta32o / NMZxltwRo8QtmkMRdAu8 =crossorigin =anonymous>< / script><< ; script src =https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.jsintegrity =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'，axisPoin网址：{data：['直接访问'，'邮件营销'，'联盟广告'，'视频广告'，'搜索引擎']}，网格：{left：' 3％'，right：'4％'，bottom：'3％'，containsLabel：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 ，位置：'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：' ，'stack'：'a'，label：{normal：{show：true，position：'insideRight'}}，data：[150,212,201,154,190,330,410]}，{name：'搜索引擎'，键入：'bar'，堆栈：'a'，标签：{normal：{show：true，position：'insideRight'}}，data，[820,832,901,934,1290,1330,1320 ]}]}; //（myCharts.forEach（function（c）{c.dispose（）;}）; // myOption结束$（'＃load_plot'）on（'click'，function（）{if（myCharts.length！= 0） （）（）;} 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）;}）;}）; < /脚本> < / body>< / html>

a href =https://jsfiddle.net/tzao357v/26/ =nofollow noreferrer>小提琴


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 properties, but being unfamiliar with CSS+HTML layout, I wasn't able to.

Any suggestion/help would be greatly appreciated. Thank you.

All of my code is below:

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/autocomplete-0.3.css" />
        <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" style="height: 100%;"></div>
                </div>
                <div class="col-6 bordered">2 of 4
                    <div id="container-1" style="height: 100%;"></div>
                </div>
                <div class="col-6 bordered">3 of 4
                    <div id="container-2" style="height: 100%;"></div>
                </div>
                <div class="col-6 bordered">4 of 4
                    <div id="container-3" style="height: 100%;"></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="js/echarts-4.1.0.js"></script>
        <script type="text/javascript">

        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>

解决方案

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

这篇关于使用Bootstrap 4 flexbox等分四个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆