仪表板网格- Chart.JS和CSS-发布两个小的水平条形图. noob问题

Question

我正在学习JavaScript，CSS和Chart.JS，我得到了一些代码来进行逆向工程和学习。我的最后一项任务是将的两个水平图div扩大到左边，而不与大的垂直条形图重叠。

基本上，我只想让我的两个小图在宽度上扩展到左边。柯本在这里：silentio/pen/VwaGdaP

​

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
    </head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" type="text/css">

<script>
  
var doughnut = document.getElementById('doughnut');
var doughnutConfig = new Chart(doughnut, {
    type: 'horizontalBar',
    data: {
        labels: ['data-1', 'data-2', 'data-3', 'data-4', 'data-5'],
        datasets: [{
            label: '# of data',
            data: [11, 30, 20, 1, 12],
            backgroundColor: ['rgba(0, 230, 118, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255,99,132,1)', 'rgba(233,69,132,1)', 'rgba(111,22,77,13)'],
            borderWidth: 1
        }]
    },
    options: {
      legend: {
    display: false,
  },
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
    }
});
//pie chart
var pie = document.getElementById('pie');
var doughnutConfig = new Chart(pie, {
    type: 'horizontalBar',
    data: {
        labels: ['rwwrerewrewewrerw', 'rwerewrewrewrew', 'rwerweewrewrew', 'rwerewewrewrewewr'],
        datasets: [{
            label: '# of data',
            data: [11, 30, 20, 14],
            backgroundColor: ['rgba(0, 230, 118, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255,99,132,1)', 'rgba(233,69,132,1)'],
            borderWidth: 1
        }]
    },
    options: {
      legend: {
    display: false,
  },
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
    }
});
//bar chart
var bar = document.getElementById('bar');
var barConfig = new Chart(bar, {
    type: 'bar',
    data: {
        labels: ['data-1', 'data-2', 'data-3'],
        datasets: [{
            label: '# of data',
            data: [30, 25, 20],
            backgroundColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 11)'],
            borderWidth: 1
        }]
    },
    options: {
      legend: {
    display: false,
  },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
    }
})
</script>

    <style>
      :root {
    --grey-d1: #585858;
    --grey-d2: #F4F4F4;
    --grey-d3: #000000;
    --red-1: #F2B8D1;
    --red-2: #F04B92;
    --red-3: #EB1E77;
    --red-4: #AD1257;
    --white: #FFFFFF;
    --blue: #329EF4;
    --grey: #eeeeee;
}
html, body {
    font-family: 'roboto';
    height: 100%;
    background-color: var(--grey);
}
.card-1, .card-2, .card-3 {
    background-color: white;
    border-radius: 20px;
    box-shadow: 2px 2px 5px 2px #D7D7D7;
}
.chart-lbl {
    margin-left: 5%;
    font-size: 12px;
    color: var(--grey-d3);
    opacity: 0.8;
}
.divider {
    background-color: var(--grey-d2);
    height: 2px;
    margin: auto;
    width: 98%;
}

/*  media queries*/

@media only screen and (min-width: 320px) {
    .bar-chart-container {
        margin: 5% 5% 5% 5%;
        width: 90%;
        height: 70%;
    }
    .dashboard-container {
        display: grid;
        grid-template: 17% 17% 17% 17% 17% 17% / repeat(1, 1fr);
        grid-gap: 20px;
        padding: 5% 0 25% 0;
    }
    .doughnut-chart-container, .pie-chart-container {
        margin: 5% auto 5% auto;
        width: 100%;
    }
    .card-1, .card-2, .card-3 {
        border-radius: 10px;
    }
    /*doughnut chart*/
    .card-1 {
        grid-row: 1 / 3;
    }
    /*pie chart*/
    .card-2 {
        grid-row: 3 / 5;
    }
    /*bar chart*/
    .card-3 {
        grid-row: 5 / 7;
    }
}
@media only screen and (min-width: 400px) {
    .dashboard-container {
        margin: 0 5% 0 5%;
    }
}
@media only screen and (min-width: 800px) {
    .dashboard-container {
        grid-template: 19% 19% 19% 19% 12% 12% / repeat(2, 1fr);
        margin: 10% 10% 0 10%;
    }
    /*doughnut chart*/
    .card-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    /*pie chart*/
    .card-2 {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }
    /*bar chart*/
    .card-3 {
        grid-column: 1 / 3;
        grid-row: 3 / 7;
    }
}
@media only screen and (min-width: 1000px) {
    .dashboard-container {
        grid-template: repeat(6, 15%) / repeat(11, 1fr);
        grid-gap: 10px;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .doughnut-chart-container, .pie-chart-container {
        margin: 3% 0 5% 0;
        width: 100%;
    }
    /*doughnut chart*/
    .card-1 {
        grid-column: 1 / 5;
        grid-row: 1 / 4;
    }
    /*pie chart*/
    .card-2 {
        grid-column: 1 / 5;
        grid-row: 4 / 7;
    }
    /*bar chart*/
    .card-3 {
        grid-column: 5 / -1;
        grid-row: 1 / 7;
    }
    main {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90vh;
        width: 80vw;
        margin: 5vh 10vw 0 10vw;
    }
}
@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1500px;
    }
}
@media screen and (min-width: 1500px){
    .dashboard-container{
        max-width: 1200px;
    }
}
</style>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Portfolio Review Overview</title>
        
        </head>
        <body>
            <div class="container">
                <main>
                    <div class="dashboard-container">
                        <div class="card-1">
                            <h4 class="chart-lbl">
                                Horizontal Bar Graph 2
                            </h4>
                            <div class="divider">
                            </div>
                            <div class="doughnut-chart-container">
                                <canvas class="doughnut-chart" id="doughnut">
                                </canvas>
                            </div>
                        </div>
                        <div class="card-2">
                            <h4 class="chart-lbl">
                                Horizontal Bar Graph 1
                            </h4>
                            <div class="divider">
                            </div>
                            <div class="pie-chart-container">
                                <canvas class="pie-chart" id="pie">
                                </canvas>
                            </div>
                        </div>
                        <div class="card-3">
                            <h4 class="chart-lbl">
                                <h2>Bar Chart</h2>
                            </h4>
                            <div class="divider">
                            </div>
                            <div class="bar-chart-container">
                                <canvas class="bar-chart" id="bar">
                                </canvas>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
            </script>
            <script src="js/generate_chart.js">
            </script>
        </body>
    </html>

​

Answer 1

考虑到网格显示的性质，您不能在不破坏布局的情况下将卡片扩展到左边。我们需要的是对grid-template for .dashboard-container进行调整。

这是更新的代码。

这里有一个gist，它的内容与笔的内容相同，但在一个html文件中。

在网格模板属性中存在一些边距和填充的问题、fr单元的误用以及媒体查询断点中的不一致性。