Chart.js条形图溢出其包含元素

Question

Chart.js

当padding应用于容器时，我无法让这个愚蠢的图表留在容器中。如果responsive选项设置为true，则无关紧要。

我设置box-sizing的内容也无关紧要。 responsive选项的目的是什么，如果不适合它的容器？

Answer 1

与大多数CSS一样，答案是使用另一个包装器！

我遇到了同样的问题（我使用盒子大小调整）

只需在画布上放一个div！ （div将继承盒子大小）

<div>
  <canvas></canvas>
</div>

祝你好运

：）

Answer 2

这将解决问题

使用Javascript：

new Chart(ctx).Line(data, {
    responsive:true,
    maintainAspectRatio: false
});

ES6

Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;