Chart.js 2.9.4通过afterDataLimits设置Y轴min/max值异常问题

根因分析 #

两种配置方式效果不同是Chart.js内部的执行逻辑和时机差异导致的：

• 直接在ticks配置项中设置min/max属于用户显式指定的固定边界，Chart.js会直接采用该值，跳过后续的自动刻度对齐优化步骤。
• afterDataLimits回调的执行时机在「自动计算数据边界之后、刻度规整逻辑执行之前」，你在该回调中修改的axis.min/axis.max会被后续的刻度对齐逻辑覆盖：Chart.js会自动将边界调整为最接近的刻度步长整数倍，因此你设置的-0.5、10.5会被规整为-2、12。

解决方案 #

以下两种方案都可以实现动态计算边界的需求，且在2.9.4和3.x版本中都可兼容使用：

方案1：改用beforeBuildTicks回调设置边界 #

该回调的执行时机在刻度规整逻辑之后、生成刻度之前，此处设置的边界不会被自动调整覆盖：

// 2.x版本写法
scales: {
    yAxes: [{
        beforeBuildTicks: function (axis) {
            // 可在此处根据数据集动态计算min、max
            axis.max = 10.5;
            axis.min = -0.5;
        }
    }]
}

// 3.x版本仅需调整scales结构，回调逻辑不变
scales: {
    y: {
        beforeBuildTicks: function (axis) {
            axis.max = 10.5;
            axis.min = -0.5;
        }
    }
}

方案2：在afterDataLimits中同时标记为用户指定边界 #

如果必须使用afterDataLimits回调，可以同时给axis的配置项赋值，告知Chart.js该边界为用户显式指定，跳过自动规整步骤：

afterDataLimits: function (axis) {
    const customMax = 10.5;
    const customMin = -0.5;
    axis.max = customMax;
    axis.min = customMin;
    // 新增以下两行，标记为用户指定边界
    axis.options.max = customMax;
    axis.options.min = customMin;
}

两种方案最终的Y轴显示范围都会是预期的-0.5~10.5，和直接在ticks下配置的效果完全一致。

内容的提问来源于stack exchange，提问作者bairog