我有一个chart js在画布内绘制的条形图：
<canvas id="chart" width="800" height="400"></canvas>
不过我希望图表适合当前窗口的大小。我努力了：
<canvas id="chart" width="100%" height="400"></canvas>
但它不喜欢它。我可以使用 window.innerWidth 获取窗口宽度，但是 100% 不起作用有什么原因吗？
请看帖子：Chart.js 画布调整大小 https://stackoverflow.com/questions/19847582/chart-js-canvas-resize。实际上有两个答案是非常好的解决方案。您可以使用如下图表选项：
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
或者您可以使用客户端代码设置画布宽度和高度：
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
这篇文章非常有效地回答了您关于为什么 % 值不起作用的问题：使用 CSS 时画布会拉伸，但使用“宽度”/“高度”属性时画布会拉伸 https://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties?rq=1
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
