本文介绍了Chart.js 忽略画布高度和宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
遵循 Chart.js 文档我正在尝试绘制一个小图表:
Following the Chart.js documentation I am trying to draw a small chart:
<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>
但是，当页面被渲染时，画布会以某种方式变成
However, when the page is rendered the canvas somehow becomes
<canvas style="height: 929px; width: 929px;" id="myChart" width="1858" height="1858"></canvas>
这对我的需要来说太大了.如何将画布的宽度和高度设置为我想要的?
which is waaaaay too big for my needs. How can I set the width and height of the canvas to be what I want?
推荐答案
我可以通过关闭响应来硬编码图表的大小:
I was able to hardcode the size of the graph by turning off responsiveness:
options: {
responsive: false
}
这篇关于Chart.js 忽略画布高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！