Сделайте холст Chart.js отзывчивым внутри изменяемого размера div

Question

Я хотел бы создать контейнер, в котором была бы диаграмма Chart.js внутри себя, но уловка в том, что диаграмма должна оставаться отзывчивой по отношению к своему родителю, а не только к окну просмотра - так как родитель должен быть изменяемого размера ... КакМогу ли я сделать это "в курсе", чтобы он правильно растягивался?Я пробовал несколько способов, но ни один из них не работал .. Вот ручка с примером:

https://codepen.io/anon/pen/BeYWNw

.container {
  width: 100%;      
  resize: both;
  overflow: auto;
  border: 1px solid blue;
}

Большое спасибо за любые советы!

Answer 1

Вам нужно установить .container, чтобы иметь:

position: relative;
overflow: hidden;

Если вы хотите, чтобы диаграмма соответствовала div set maintainAspectRatio: false.

Вот рабочий пример:

let myChart = new Chart(
  document.getElementById('chart'), {
    type: 'bar',
    data: {
      labels: ['a', 'b', 'c'],
      datasets: [{
        label: 'Series1',
        data: [1, 10, 6]
      }]
    },
    options: {
      maintainAspectRatio: false
    }
  }
);

.container {
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
  resize: both;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="container">
  <canvas id="chart"></canvas>
</div>

Answer 2

Возможно, я не правильно понял ваш вопрос, но удаление максимальной ширины должно помочь ...