我创建了一个容器，并将其设置为视图端口的期望高度(取决于图表的数量或图表的特定大小):

.graph-container {
width: 100%;
height: 30vh;
}

为了对屏幕大小进行动态调整，我将容器设置如下:

*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
        display: block;
        float: none;
        width: 100%;
        margin-top: 0px;
        margin-right:0px;
        margin-left:0px;
        height: auto;
    }
}

当然，非常重要的是(已经提到过很多次了)在图表中设置以下选项属性:

options:{
    maintainAspectRatio: false,
    responsive: true,
}

只是补充一下@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中定义它的高度。

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

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

...

options = {
   maintainAspectRatio: false,

 ...
}

...

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

考虑下面的代码。

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

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

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

对于react，这样做是有效的:

<Doughnut
  data={data}
  height="200px"
  width="200px"
  options={{ maintainAspectRatio: false }}
/>

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

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