如何将响应式chart.js图表设置为不填充屏幕？

Question

我想将我的图表的高度设置为它包含div的百分比。我该怎么做呢？

这是一个很简单的问题，但是如果我设置了图表responsive: false，那么我可以拉伸它，但是它不成比例，因为底层的高度和宽度已经设置好了。

如果我将其设置为responsive: true，那么图表将从包含的div中溢出并充满整个屏幕。

如果我将包含div的CSS设置为contain: content，那么我只能看到图的顶部。

我该怎么办？

例如：

<div style="display: block; width: 80%; height: 30%; margin-left:10%;">
    <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [colors]="colors" [options]="barChartOptions" [legend]="'false'"
        [chartType]="'bar'" (chartClick)="chartClicked($event)">
    </canvas>
</div>

Answer 1

在比例属性中有一个高度属性。我正在为我的项目使用devexpress图表，如果你可以购买产品，它比其他图形库容易得多。