chart.js - 获取图表js条形图以填充窗口

Question

我有一个 chart js在 Canvas 内绘制的条形图:

<canvas id="chart" width="800" height="400"></canvas>

但是我希望图表适合当前窗口的大小。我试过了:

<canvas id="chart" width="100%" height="400"></canvas>

但它不喜欢它。我可以使用 window.innerWidth 获取窗口宽度，但是 100% 不起作用有什么原因吗？

Answer 1

请看帖子: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,

或者您可以使用客户端代码设置 Canvas 宽度和高度:

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);

这篇文章非常有效地回答了您关于为什么 % 值不起作用的问题: Canvas is stretched when using CSS but normal with "width" / "height" properties