如何对齐 chart.js 饼图？答案

【问题标题】：How do I align chart.js pie charts?如何对齐 chart.js 饼图？
【发布时间】：2019-06-26 01:53:30
【问题描述】：

我正在尝试显示一些 chart.js 饼图。我希望第一个很大并且在中间居中 - 就是这样。但问题是我想要下面两列图表，但它们不是centred。图表之间还有一个很大的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。

【问题讨论】：

标签： html css alignment chart.js pie-chart

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：