Chart.js柱状图设置Y轴从0开始但部分场景失效的问题求助

我已经在代码里配置了让柱状图Y轴从0开始的相关设置，但碰到了一个奇怪的问题：当numInput.value（也就是下面代码里的inputVal）小于totalEmissions时，图表的Y轴好像默认从inputVal的数值开始了，导致部分柱状图内容被遮挡完全看不到，这可把我愁坏了😅

当inputVal < totalEmissions时的代码片段 #

这种场景下图表会出现Y轴起始异常的问题

JavaScript代码

barGraphA = document.getElementById("BarGraphA")

inputVal = 22 // 这里模拟numInput.value的取值
totalEmissions = 26

const maxValue = Math.max(totalEmissions, inputVal);
const canvasHeight = maxValue * 10; // 调整这个乘数可以优化图表的可见性

barGraphA.innerHTML = `<canvas id="barChartA" style="width:100%; max-width:350px; height:${canvasHeight}px;"></canvas>`;

new Chart("barChartA", {
    type: 'bar',
    data: {
        labels: ['Your Emissions', 'Your Estimate'],
        datasets: [{
            label: 'Tons of CO2 (Every Year)',
            data: [totalEmissions, inputVal],
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)',
                'rgba(153, 102, 255, 0.2)',
            ],
            borderColor: [
                'rgba(54, 162, 235, 1)',
                'rgba(153, 102, 255, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                min: 0, // 强制设置Y轴从0开始
                max: maxValue + 10 // 让Y轴最大值比数据最大值多10，留一点显示余量
            }
        }
    }
});

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="BarGraphA">
  </div>
  
  <script src="scripts.js"></script>
  <script
  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
  </script>
  
</body>
</html>

当inputVal > totalEmissions时的代码片段 #

这种场景下图表显示正常，Y轴确实从0开始，没有遮挡问题

JavaScript代码

barGraphA = document.getElementById("BarGraphA")

inputVal = 20 // 这里模拟numInput.value的取值
totalEmissions = 18

const maxValue = Math.max(totalEmissions, inputVal);
const canvasHeight = maxValue * 10; // 调整这个乘数可以优化图表的可见性

barGraphA.innerHTML = `<canvas id="barChartA" style="width:100%; max-width:350px; height:${canvasHeight}px;"></canvas>`;

new Chart("barChartA", {
    type: 'bar',
    data: {
        labels: ['Your Emissions', 'Your Estimate'],
        datasets: [{
            label: 'Tons of CO2 (Every Year)',
            data: [totalEmissions, inputVal],
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)',
                'rgba(153, 102, 255, 0.2)',
            ],
            borderColor: [
                'rgba(54, 162, 235, 1)',
                'rgba(153, 102, 255, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                min: 0, // 强制设置Y轴从0开始
                max: maxValue + 10 // 让Y轴最大值比数据最大值多10，留一点显示余量
            }
        }
    }
});

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="BarGraphA">
  </div>
  
  <script src="scripts.js"></script>
  <script
  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
  </script>
  
</body>
</html>

备注：内容来源于stack exchange，提问作者Tuxedp