根据高度调整图表

Question

我想根据图表的高度对齐图表。我正在使用带有Chart.js的引导程序，但无法连续正确显示带有两个条形图的饼图。正如您在中看到的那样，两个条形图未垂直填充其容器。这是我的html代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <p class="pieChartText">
                حساب کاربری
            </p>
            <hr>
            <canvas id="myPieChart5"></canvas>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <p class="pieChartText">
                کاربران فعال
            </p>
            <hr>
            <canvas id="myBarChart5"></canvas>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <p class="pieChartText">
                ربات‌های فعال
            </p>
            <hr>
            <canvas id="myBarChart4"></canvas>
        </div>
    </div>
</div>

这就是我创建饼图的方式：

var myPieChart5 = new Chart(document.getElementById('myPieChart5').getContext('2d'), {
    type: 'doughnut',
    data: {
        datasets: [{
            backgroundColor: ['#393F63', '#E5D8B0', '#FFB367', '#F98461', '#D9695F'],
            borderWidth: 0,
            hoverBorderWidth: 0,
            data: sourceCounters
        }],
        labels: sources
    },
    options: {
        layout: {
            padding: {
                top: 5,
                right: 30,
                bottom: 10,
                left: 30
            }
        },
        legend: {
            display: true,
            position: 'left',
            labels: {
                padding: 10,
                fontSize: 12,
                fontFamily: 'irsans',
            }
        }
    }
});

条形图创建如下：

var myBarChart4 = new Chart(document.getElementById('myBarChart4').getContext('2d'), {
    type: 'horizontalBar',
    data: {
        labels: bots,
        datasets: [{
            backgroundColor: ['#393F63', '#E5D8B0', '#FFB367', '#F98461', '#D9695F'],
            data: botCounters
        }]
    },
    options: {
        responsive: true,
        legend: {
            display: false,
            labels: {
                padding: 10,
                fontSize: 12,
                fontFamily: 'irsans',
            }
        },
        scales: {
            xAxes: [{
                ticks: {
                },
                gridLines: {
                    display: false
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                },
                gridLines: {
                    display: false
                }
            }]
        }
    }
});


var myBarChart5 = new Chart(document.getElementById('myBarChart5').getContext('2d'), {
    type: 'horizontalBar',
    data: {
        labels: activeUsers,
        datasets: [{
            backgroundColor: ['#393F63', '#E5D8B0', '#FFB367', '#F98461', '#D9695F'],
            data: activeUsersCounters
        }]
    },
    options: {
        responsive: true,
        legend: {
            display: false,
            labels: {
                padding: 10,
                fontSize: 12,
                fontFamily: 'irsans',
            }
        },
        scales: {
            xAxes: [{
                ticks: {
                },
                gridLines: {
                    display: false
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                },
                gridLines: {
                    display: false
                }
            }]
        }
    }
});

我还尝试了 maintainAspectRatio：false ，但这没有帮助。因为我的图表的高度无限增加。