Javascript 为什么chart.js canvas不考虑容器元素的填充？

我将Chart.js与一个简单的折线图一起使用，但是Chart.js计算的宽度和高度属性似乎是基于忽略填充的父元素的总宽度和高度

var选项={
MaintaintAspectRatio:false，
回答：对
};
风险值数据={
标签：[，，，，，，，，，，，，，，，，]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
},
{
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[28,48,40,19,86,27,90]
}
]
};
var ctx1=document.getElementById（“mychart1”）.getContext（“2d”）；
var myNewChart=新图表（ctx1）.Line（数据、选项）
.container{
填充：15px 15px 15px 15px；
宽度：300px；
高度：200px；
边框：1px纯黑；
}
.孩子{
显示：内联块；
边框：1px纯红；
宽度：100%；
身高：100%；
}



测试
在JSFIDLE示例中，将
responsive
属性更改为false：

var options = {
    maintainAspectRatio: true,
    responsive: false
};

在使用Chrome dev工具检查元素时，先前的设置在高度和宽度上都增加了30px。由于画布的大小，在调整画布的大小时应该不会有问题

我还需要一块响应性强的画布，因此出现了这个问题。这是我的解决方案：

<div>
    <canvas id="chart"></canvas>
</div>



由于Chart.js将画布缩放到容器的宽度，忽略了填充，因此我将画布包装在
div
中。
div
缩放到带有填充的容器，与填充有关，然后responsive Chart.js
canvas
缩放到
div
“例如，如果您希望创建的所有图表都具有响应性，并在浏览器窗口响应时调整大小，则可以更改以下设置：”

Chart.defaults.global.responsive=true

“现在，每次我们创建图表时，options.responsive都是正确的。”

来源：
更好的解决方案是使用
.container{box size:border box；}
我在谷歌上搜索了这个问题，最后找到了一个简单的解决方案

我添加了
高度
，这样它可以自动相应地调整宽度，并以更好的方式显示。如果你真的需要，你也可以添加
width
。
canvas
元素是
HTML5
的一部分

它不允许您使用
px
输入值。所以忽略它，只需键入所需的数值

 <canvas id="myChart" height="80"></canvas>

我包装了这个CSS，然后使用了这个CSS

.chart-container {
  box-sizing:border-box;
  margin:2%;
  width:96%;
}

这使得它从边缘填充，反应灵敏。我使用了2%，但您可以使用适合您布局的任何百分比。
我们实际上需要它来响应。我所追求的行为是一个具有静态高度的响应宽度，因此响应为真，保持纵横比为假。我可以通过将其包装在一个附加的包含div中而无需填充来实现它，请参阅，但这似乎只是一个必要的解决方法，因为Chart.js无法正确计算画布维度。这似乎是解决此问题的最简单方法。很好的简单修复。很好！这个解决方案很简单，帮我把油炸圈饼图放大。请添加一个解释，说明OP应该如何处理这行代码。这将为OP和未来的人提供一个可靠的可能答案。图表已经设置为响应。这并不能解决问题，如果有其他图表不应响应，则可能会导致问题。