Question

我试图并排显示那些图表，并以相同的高度显示2个div，然后将2个图表放在其中。我尝试为每个使用硬代码CSS：“ style =” height：40vh;宽度：40vw“”“，但如果我更换屏幕，它们的高度将不再相同 ................................................... ............................................

这是饼图的代码：

<div id="canvas-holder" style="height:40vh; width:40vw">
        <canvas id="chart-area"></canvas>
    </div>
    <script>
        var view_DA = JSON.parse('@DATA_QUERIED');
        var duyanh_lab = [];
        var duyanh_data = [];
        for (var i = 0; i < view_DA.length; i++) { duyanh_lab.push(view_DA[i].ZONE_NAME); };
        for (var i = 0; i < view_DA.length; i++) { duyanh_data.push(view_DA[i].ZONE_VALUE); };
        var config = {
            type: 'pie',
            data: {
                datasets: [{
                    data: duyanh_data,
                    backgroundColor: [
                    'dark khaki',
                    'khaki',
                    'olive',
                    'yellow',
                    'yellow green',
                    'dark olive green',
                    'olive drab',
                    'lawn green',


                    ],
                    label: 'Dataset 1'
                }],
                labels: duyanh_lab
            },
            options: {
                responsive: true,


            }
        };
        $(document).ready(function () {
            var ctx = document.getElementById('chart-area').getContext('2d');
            window.myPie = new Chart(ctx, config);

        });

    </script>

**and bar-char:** 




    <div id="container" style="height:40vh; width:40vw">
    <canvas id="canvas"></canvas>
</div>
<script>
    var view_DA2 = JSON.parse('@DATA_QUERIED');
    var duyanh_lab = [];
    var duyanh_data = [];
    for (var i = 0; i < view_DA2.length; i++) { duyanh_lab.push(view_DA2[i].ZONE_NAME); };
    for (var i = 0; i < view_DA2.length; i++) { duyanh_data.push(view_DA2[i].ZONE_VALUE); };
    var barChartData = {

        labels: duyanh_lab,
        datasets: [{
            label: 'Thời gian truy cập',
            backgroundColor: '#FF6384',
            borderColor: '#FF6384',
            borderWidth: 2,
            hoverBackgroundColor: '#FF6384',
            hoverBorderColor: '#FF6384',
            data: duyanh_data,
        }],
    };

    $(document).ready(function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }
            }
        });
    });
</script>
<div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
</div>
<script>
    var view_DA2 = JSON.parse('@DATA_QUERIED');
    var duyanh_lab = [];
    var duyanh_data = [];
    for (var i = 0; i < view_DA2.length; i++) { duyanh_lab.push(view_DA2[i].ZONE_NAME); };
    for (var i = 0; i < view_DA2.length; i++) { duyanh_data.push(view_DA2[i].ZONE_VALUE); };
    var barChartData = {

        labels: duyanh_lab,
        datasets: [{
            label: 'Thời gian truy cập',
            backgroundColor: [
                'red'
            ],
            borderColor: 'red',
            borderWidth: 2,
            data:
                duyanh_data,

        }],
    };

    $(document).ready(function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }
            }
        });
    });
</script>

Answer 1

尝试将display: flex;添加到您的样式中：

<div id="canvas-holder" style="height:40vh; width:40vw; display: flex;">

默认flex-direction是row。

Answer 2

您将要使用flexbox适当地对齐所有内容。使用类在任何地方重用css，您会很好=）

*{
    box-sizing: border-box;
}

.container {
    width: 90%;
    margin: auto;
}

.main_wrapper{
    background-color: lightblue;
    display: flex;
    flex-wrap: row;
    justify-content: center;
    align-items: center;
    height: 900px;
}
.canvas_wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background-color: aquamarine;
}
.canvas{
    width: 100%;
    height: auto;
    border: 1px solid black;
}
.title{
    font-size: 3vw;
}

<div class="container">

    <div class="main_wrapper">

    <!--Canvas 1-->
    
    <div class="canvas_wrapper">
        <h1 class="title">main canvas</h1>
        <canvas class="canvas chart-area"></canvas>
    </div>

    <!--Canvas 2-->
    
    <div class="canvas_wrapper">
        <h1 class="title">second canvas</h1>
        <canvas class="canvas chart-area"></canvas>
    </div>

    <!--Canvas 3-->
    
    <div class="canvas_wrapper">
        <h1 class="title">third canvas</h1>
        <canvas class="canvas chart-area"></canvas>
    </div>
   

    </div>

</div>

您正在寻找什么？

并排对齐2个图表（饼形图，条形图）

2 个答案: