[英]Chart.js ignoring canvas height & width
在Chart.js文档之后,我试图绘制一个小图表:
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:['15-2016','16-2016','17-2016',],
datasets:[
{
label:'Yes',
data:[3.4884,1.1628,1.3514,],
backgroundColor:'rgba(75,192,192,1)',
borderColor:'rgba(75,192,192,1)',
pointRadius:0
},
{
label:'Maybe',
data:[0.5571,1.3298,0.791,],
backgroundColor:'rgba(255,206,86,1)',
borderColor:'rgba(255,206,86,1)',
pointRadius:0
},
{
label:'No',
data:[0,0,0,],
backgroundColor:'rgba(255,99,132,1)',
borderColor:'rgba(255,99,132,1)',
pointRadius:0
}
]
}
});
</script>
但是,当页面呈现时,画布会以某种方式变为
<canvas style="height: 929px; width: 929px;" id="myChart" width="1858" height="1858"></canvas>
这对我来说太大了。 如何将画布的宽度和高度设置为我想要的?
我能够通过关闭响应性来硬编码图形的大小:
options: {
responsive: false
}
我通过在选项中添加“maintainAspectRatio:false”解决了这个问题。
options : {
maintainAspectRatio: false
};
使用Both选项,maintainAspectRatio:false和responsive:false似乎可以使图表适合画布在画布高度和宽度标签中的大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.