javascript Chart.js 不尊重我的容器尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32459948/
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
Chart.js is not respecting my container dimensions
提问by lisburnite
I'm trying to create a line chart using the Chart.js library. I've got a divwith dimensions 600px wide by 250px height, and from what I've read the library is meant to create a line chart using these parent dimensions.
我正在尝试使用 Chart.js 库创建折线图。我有一个div600 像素宽 x 250 像素高的尺寸，从我读过的库来看，该库旨在使用这些父尺寸创建折线图。
The following shows my HTML element:
下面显示了我的 HTML 元素：
<div style="width:600px;height:250px">
<canvas id="myChart"></canvas>
</div>
This is the code I'm using:
这是我正在使用的代码：
$(document).ready(function(){
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
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 ctx = $("#myChart").get(0).getContext("2d");
new Chart(ctx).Line(data, {
responsive:true
});
});
And this shows the issue I'm having in jsfiddle: https://jsfiddle.net/Lr88htnp/(Note that the rendered chart has dimensions of 600x300)
这显示了我在 jsfiddle 中遇到的问题：https://jsfiddle.net/Lr88htnp/ （请注意，呈现的图表的尺寸为 600x300）
回答by potatopeelings
You need to set the option maintainAspectRatioto false
您需要将该选项设置maintainAspectRatio为 false
....
new Chart(ctx).Line(data, {
responsive:true,
maintainAspectRatio: false
});
Fiddle - https://jsfiddle.net/3cxeyLc8/
回答by Bangkokian
Add the following CSS to #myChart:
将以下 CSS 添加到 #myChart：
<canvas id="myChart" style="width:100%;height:100%;"></canvas>
