html - 如何对齐 chart.js 饼图？

Question

我正在尝试显示一些 chart.js 饼图。我希望第一个很大并且在中间居中 - 就是这样。但问题是我想要下面两列图表，但它们没有居中。图表之间也有很大的差距，我不知道如何摆脱。

这是我的CSS：

.chart-container{
            width:100%;
            height:480px;
            margin: auto;
        }
        .pie-chart-container,
        .doughnut-chart-container {
            height:360px;
            width:360px;
            float:left;
        }

HTML：

       <div>
            <div>
                <canvas id='chart8'></canvas>
            </div>
            <div class='doughnut-chart-container'>
                <canvas id='chart4'></canvas>
            </div>
            <div class='doughnut-chart-container'>
                <canvas id='chart5'></canvas>
            </div>

            <div class='doughnut-chart-container'>
                <canvas id='chart6'></canvas>
            </div>
            <div class='doughnut-chart-container'>
                <canvas id='chart7'></canvas>
            </div>
        </div>

我在 js 的顶部图表中添加了填充，但其他的没有任何填充。

标签： htmlcssalignmentchart.jspie-chart

Answer 1

像这样的网格布局可以帮助你

.full-width {
  height: 100px;
  margin-bottom: 1em;
  background: #ccc;
}

.one-by-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

.one-by-two .item {
  height: 100px;
  background: #ccc;
}

<div class="container">
  <div class="full-width">
    <!-- canvas -->
  </div>
  <div class="one-by-two">
    <div class="item">
      <!-- canvas -->
    </div>
    <div class="item">
      <!-- canvas -->
    </div>
  </div>
</div>