Как выровнять круговые диаграммы chart.js? - PullRequest
Новая
       63

Как выровнять круговые диаграммы chart.js?

0 голосов
/ 26 июня 2019

Я пытаюсь отобразить несколько круговых диаграмм chart.js.Я хочу, чтобы первый был большим и центрирован посередине - это так.Но проблема в том, что мне нужны 2 столбца диаграмм внизу, но они не центрированы .Между графиками есть большой разрыв , от которого я не знаю, как избавиться.

Это мой 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, но у других дополнений нет.

Ответы [ 2 ]

1 голос
/ 26 июня 2019

Примерно так с макетом сетки может помочь вам 

.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>
0 голосов
/ 26 июня 2019 

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