Question

我想创建一个在其内部具有Chart.js图表的容器，但要注意的是，该图表必须相对于其父级而不是仅对视口保持响应-因为父级应该是可调整大小的……如何我可以使它“意识到”，以便正确延伸..？我尝试了几种方法，但是都没有用。.这是带有示例的笔：

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

Answer 2

也许我没有正确回答您的问题，但是删除最大宽度应该可以解决问题...

使Chart.js画布在可调整大小的div中响应

2 个答案: