Question

我在画布中绘制了一个chart js条形图：

<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,

或者您可以使用客户端代码设置画布宽度和高度：

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

Answer 2

设置响应和比率选项（签出相关的chartjs doc）后，使用以下CSS填充100％的父项：

html

<div class="panel">
  <div class="chart-container">
    <canvas id="chart"></canvas>
  </div>
</div>

scss：

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}

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

2 个答案: