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;