options: {
  responsive: true, 
  maintainAspectRatio: false
}

它与这些选项完美配合。

要使其正常工作，除了使用以下选项外，还需要将图表 Package 在专用元素中：

options: {
    responsive: true, 
    maintainAspectRatio: false
}

示例：

<div>
    <canvas id="xxx"></canvas>
</div>

请参阅官方文件：
无法直接从CANVAS元素中检测画布大小的变化。Chart.js使用其父容器来更新画布呈现和显示大小。但是，此方法要求容器相对定位，并且仅专用于图表画布。

这个问题有一个公认的答案，但对我来说，它只是答案的一部分。至少对我来说，文档中不清楚的是，您必须设置画布父元素的高度，否则使用maintainAspectRatio：false高度将为零。
这是我使用Bootstrap 4卡时的工作原理（内联样式用于说明）：

<div class="card">
    <div class="card-body" style="height: 400px;">
        <canvas id="myChart"></canvas>
    </div>
</div>

然后将这些添加到选项：

options: {
    maintainAspectRatio: false
}

默认情况下，responsive设置为true。
这还允许轻松使用响应断点和媒体查询来调整图表的大小。

如果你想改变长宽比，你可以使用docs中的maintainAspectRatio选项。你的高度和宽度应该从canvas设置值中获取，或者使用css来设置canvas元素的样式。

options: {
    responsive: false, 
    maintainAspectRatio: false
}