你可以把你的canvas元素包装在一个父div中，相对的位置，然后给这个div你想要的高度，在你的选项中设置maintainAspectRatio: false

//HTML
<div id="canvasWrapper" style="position: relative; height: 80vh/500px/whatever">
<canvas id="chart"></canvas>
</div>

<script>
new Chart(somechart, {
options: {
    responsive: true,
    maintainAspectRatio: false

/*, your other options*/

}
});
</script>

只是补充一下@numediaweb给出的答案

如果你在按照说明设置maintainAspectRatio=false后，会把头撞到墙上:我最初从一个网站上获得的使用图表.js和Angular 2+的示例中复制了我的代码:

        <div style="display: block">
          <canvas baseChart
                  [datasets]="chartData"
                  [labels]="chartLabels"
                  [options]="chartOptions"
                  [legend]="chartLegend"
                  [colors]="chartColors"
                  [chartType]="chartType">
          </canvas>
        </div>

为了正确地工作，你必须删除嵌入的(不必要的)style="display: block"，而是为div定义一个类，并在CSS中定义它的高度。

一旦你这样做了，图表应该有响应的宽度和固定的高度。

这个对我很有用:

我从HTML中设置了高度

canvas#scoreLineToAll.ct-chart.tab-pane.active[height="200"]
canvas#scoreLineTo3Months.ct-chart.tab-pane[height="200"]
canvas#scoreLineToYear.ct-chart.tab-pane[height="200"]

然后我禁用了保持纵横比

options: {
  responsive: true,
  maintainAspectRatio: false,

你应该为canvas元素使用html height属性:

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>

如果你在选项中禁用了保持纵横比，那么它将使用可用的高度:

var chart = new Chart('blabla', {
    type: 'bar',
    data: {
    },
    options: {
        maintainAspectRatio: false,
    }
});

需要图表100%填充父元素，而不是手动设置高度，问题是强制父div总是填充剩余空间。

在设置响应和比率选项后(查看相关的chartjs文档)，下面的css做到了:

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;
  }
}