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

Question

我的图表 Canvas 结构如下:

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

使用它，我的图表位于右侧，左侧旁边是另外两行。我希望它看起来像这样:

但是由于某些原因，图表没有完全使用高度。它看起来像这样:

我不能只为 Canvas 设置另一个高度，因为那样的话，图表就会变形。如何让 y 轴变长，从而使图表的高度变大并使用布局的全高？

Answer 1

解决方案是为图表设置选项对象的这个属性:

maintainAspectRatio: false

然后我可以像这样调整高度:

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