Admin Page' Responsive Charts.

[이미연]

안녕하세요. 선생님, 항상 많은 가르침 감사합니다.
저는 Admin Page를 bootstrap-5.3.0 으로 실습하는 중
<div class="container mt-5 mb-5">
    <div class="row">
      <div class="col-lg-8 mb-4"> <div class="card">
 <div class="card-header">Earnings Overview</div>
 <div class="card-body"><canvas id="myChart"></canvas></div></div></div>
      <div class="col-lg-4"><div class="card">
  <div class="card-header">   Featured  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><div>An item</div>
    <li class="list-group-item">A second item
    <li class="list-group-item">A third item
  </div></div>  </div></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Blue', 'Red', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{ label: 'Last of CSS', data: [12, 19, 3, 5, 20, 3],      
          borderColor: 'rgb(75, 192, 192)', backgroundColor:'rgb(75, 192, 192)',
          fill:true, tension: 0.1,  borderWidth: 3,
      }]
    },
    options: { responsive:true,
      scales: { y: { beginAtZero: true }}}
  })
</script>
 <script src="../bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
      </div>
    </body>
<canvas id="myChart">가 responsive 형이 아녀서, 반응형 차트를 만들기 위해,
.card-body{position: relative}
#myChart{position: absolute}
.col-lg-8::after{ content: '';display: block;float: none;clear: both;
} 시도를 하여 차트는 반응 형이 되었으나,

 

bootstrap card-body 형식이 .card-body{position: relative} 줬더니, 줄어들었고, #myChart{position: absolute}
.col-lg-8::after{ content: '';display: block;float: none;clear: both;
} absolute 로 붕뜬 게 잡히지도 않습니다. 차트는 창 조절에 따라 크기 조절은 잘 됩니다...
기존 bootstrap card형식이랑 충돌이 생겨서 그러는 걸까요.... bootstrap 없이 손수 짜야 되는건가요... 
조언 부탁드립니다. 감사합니다. 

[codingapple]

원래 차트는 기본으로 반응형일걸요 position 속성들은 빼고 width 속성같은거 퍼센트로 주거나 없애봅시다

[이미연]

canvas{
  width:100% !important;
  height:100% !important;
}   이걸로 해결했습니다. 감사합니다.

[글쓴이]

글