你可以把你的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>

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

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

这个对我很有用:

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

看，在初始化语句中有一个错误。maintainAspectRatio应该放在选项对象中，如下所示

...

options = {
   maintainAspectRatio: false,

 ...
}

...

现在，你可以做的是设置图表父元素的高度，这里div .chart是div #myChart的父元素。 因此，指定div .chart的高度就可以了。

考虑下面的代码。

<div class="chart" style="height: 500px;">
   <canvas id="myChart"></canvas>
</div>

根据你自己改变高度，对我来说，500px就可以了;)

似乎var ctx = $('#myChart');返回元素列表。您需要使用ctx[0]引用第一个。 高度也是一个属性，而不是函数。

我在代码中是这样做的:

var chartEl = document.getElementById("myChart");
chartEl.height = 500;

需要图表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;
  }
}