Javascript 为什么 chart.js 画布不尊重容器元素的填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28162810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is chart.js canvas not respecting the padding of the container element?
提问by Hawk
I am using Chart.js with a simple line chart but the width and height properties calculated by Chart.js seem to be based on the total width and height of the parent element ignoring padding.
我使用 Chart.js 和一个简单的折线图，但 Chart.js 计算的宽度和高度属性似乎基于父元素的总宽度和高度，忽略填充。
var options = {
maintainAspectRatio: false,
responsive: true
};
var data = {
labels: ["", "", "", "", "", "", ""],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx1 = document.getElementById("mychart1").getContext("2d");
var myNewChart = new Chart(ctx1).Line(data, options);.container {
padding: 15px 15px 15px 15px;
width: 300px;
height: 200px;
border: 1px solid black;
}
.child {
display: inline-block;
border: 1px solid red;
width:100%;
height:100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<div class='container'>
<canvas id='mychart1' class='child'></canvas>
</div>
<br>
<div class='container'>
<div class='child'>test</div>
</div>The second container and child shows the behaviour I am expecting. Is this a bug with how Chart.js calculates the width and height of the canvas or am I making a styling mistake?
第二个容器和子项显示了我期望的行为。这是 Chart.js 如何计算画布宽度和高度的错误还是我犯了样式错误？
回答by gwg
I also needed a responsive canvas and had this issue. This was my fix:
我还需要一个响应式画布并且遇到了这个问题。这是我的修复：
<div>
<canvas id="chart"></canvas>
</div>
Since Chart.js scales the canvas to the width of the container, ignoring the padding, I just wrapped the canvas in a div. The divscales to the container with padding, respecting the padding, and then the responsive Chart.js canvasscales to the div.
由于 Chart.js 将画布缩放到容器的宽度，忽略了填充，我只是将画布包裹在div. 该div尺度与填充容器，尊重填充，然后响应chart.js之canvas鳞去div。
回答by Angie
A better solution is to use
.container {box-sizing: border-box;}
更好的解决方案是使用
.container {box-sizing: border-box;}
回答by Dulith De Costa
I too googled for this problem and ended up with a simple solution.
我也用谷歌搜索了这个问题，最终得到了一个简单的解决方案。
I added heightso that it automatically adjust the width accordingly and show it in a nicer way. If u really want you could add widthtoo. The canvaselement is part of HTML5.
我添加了height以便它相应地自动调整宽度并以更好的方式显示它。如果你真的想要你也可以添加width。该canvas元素是 的一部分HTML5。
It does not allow you to input values with px. So ignore that and just type tha numerical value u need.
它不允许您使用px. 所以忽略它，只输入你需要的数值。
<canvas id="myChart" height="80"></canvas>
回答by Conrad Lotz
In your jsfiddle example change the responsiveattribute to false:
在您的 jsfiddle 示例中，将responsive属性更改为 false：
var options = {
maintainAspectRatio: true,
responsive: false
};
The previous setting added a additional 30px to both the height and width when you inspect the element using Chrome dev tools. Because of the size of the canvas it should not be problematic when it comes to resizing of the canvas.
当您使用 Chrome 开发工具检查元素时，先前的设置为高度和宽度增加了 30 像素。由于画布的大小，在调整画布大小时应该没有问题。
回答by Chris Smith
I wrapped the in and then used this CSS.
我将其包裹起来，然后使用了这个 CSS。
.chart-container {
box-sizing:border-box;
margin:2%;
width:96%;
}
This keeps it padded from the edges and responsive. I used 2% but you can use whatever percentages suit your layout.
这使它从边缘得到填充和响应。我使用了 2%，但您可以使用适合您布局的任何百分比。
回答by K. Mehmeti
"If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:"
“例如，如果您希望创建的所有图表都具有响应性，并在浏览器窗口响应时调整大小，则可以更改以下设置：”
Chart.defaults.global.responsive = true;
Chart.defaults.global.responsive = true;
"Now, every time we create a chart, options.responsive will be true."
“现在，每次我们创建图表时，options.responsive 都会为真。”
Source: http://www.chartjs.org/docs/
