使用chart.js和bootstrap调整y轴的长度

Question

我的图表画布有以下结构：

<div class="row">

    <div class="col-md-4">
        <div class="row">
            <!-- something -->
        </div>
        <div class="row">
            <!-- something -->
        </div>
    </div>

    <div class="col-md-8">
        <canvas class="chart chart-bubble" chart-data="c.data" chart-options="c.options" chart-series="c.series"></canvas>    
    </div>

</div>

使用这个，我的右边是我的图表，左边是另外两行。我希望它看起来像这样：

但由于某种原因，图表并未完全使用高度。 它看起来像这样：

我无法为画布设置另一个高度，因为这样，图表就会变形。 如何使y轴更长，因此图表的高度变得更大并且使用了布局的整个高度？

Answer 1

解决方案是为图表设置options-object的这个属性：

maintainAspectRatio: false

然后我可以调整高度，如：

.chart-container {
    position: relative;
    height: 65vh;
}