javascript - 使 Chart.js Canvas 在可调整大小的 div 内响应

Question

我想创建一个内部包含 Chart.js 图表的容器，但诀窍是图表必须保持相对于其父级的响应，而不仅仅是对视口(viewport)的响应 - 因为父级应该可以调整大小......如何我可以让它“意识到”以便它正确拉伸(stretch)..？我尝试了几种方法，但都没有奏效。这是带有示例的笔:

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，请设置 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>