如何对齐 chart.js 个饼图？

Question

我正在尝试显示多个 chart.js 饼图。我希望第一个很大并且居中于中间 - 它就是这样。但问题是我想要下面的 2 列图表，但它们不是 centred. There is also a large gap 在我不知道如何摆脱的图表之间。

这是我的 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中给顶部的图表添加了padding，但是其他的没有任何padding。

Answer 1

类似 grid layout 的内容可以帮助您

.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>

Answer 2

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [12, 19, 3, 17, 28, 24, 7]
    }]
  },
  options: {
    legend: {
      display: false
    }
  }
});

.row {
  clear: both;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.cell {
  float: left;
  min-height: 200px;
  width: 24%;
  text-align: center;
  border: 1px solid black;
  min-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<div class="row">
  <div class="cell">
    <canvas id="myChart"></canvas>
  </div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
</div>
<div class="row">
  <div class="cell">21</div>
  <div class="cell">22</div>
  <div class="cell">23</div>
  <div class="cell">24</div>
</div>
<div class="row">
  <div class="cell">31</div>
  <div class="cell">32</div>
  <div class="cell">33</div>
  <div class="cell">34</div>
</div>
<div class="row">
  <div class="cell">41</div>
  <div class="cell">42</div>
  <div class="cell">43</div>
  <div class="cell">44</div>
</div>

如何对齐 chart.js 个饼图？

How do I align chart.js pie charts?

html

css

alignment

pie-chart

chart.js