Chart.js 获取要填充窗口的图表js条形图
我有一个Chart.js 获取要填充窗口的图表js条形图,chart.js,Chart.js,我有一个图表js条形图,它在画布中绘制: <canvas id="chart" width="800" height="400"></canvas> 但是,我希望图表适合当前窗口的大小。我试过: <canvas id="chart" width="100%" height="400"></canvas> 但它不喜欢它。我可以使用window.innerWidth获得窗口宽度,但是有没有任何原因可以解释为什么100%不起作用?请查看帖子:
图表js
条形图,它在画布中绘制:
<canvas id="chart" width="800" height="400"></canvas>
但是,我希望图表适合当前窗口的大小。我试过:
<canvas id="chart" width="100%" height="400"></canvas>
但它不喜欢它。我可以使用window.innerWidth获得窗口宽度,但是有没有任何原因可以解释为什么100%不起作用?请查看帖子:。实际上,这里有两个答案是非常好的解决方案。您可以使用以下图表选项:
// 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填充100%的父项: html
谢谢纯属偶然,我发现在选项中加入“响应:真”可以完美地完成工作。很好,没问题。当我开始使用这个库时,我也遇到了同样的问题。也许你可以把它标记为一个答案,这样其他人可以把它作为参考。
<div class="panel">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
.panel {
display: flex;
.chart-container {
position: relative;
flex-grow: 1;
min-height: 0;
}
}