Chart.js添加X轴标题报Uncaught RangeError: minimumFractionDigits超出范围

报错原因 #

你遇到的报错是因为X轴错误配置了beginAtZero: true属性：

• 你当前使用的条形图X轴默认是「类别轴」，属于分类刻度，没有数值范围的概念，beginAtZero是数值轴（你的Y轴就是数值轴）专属的配置项，类别轴不支持该属性
• 当你给X轴配置title时，会触发Chart.js内部的刻度属性校验逻辑，非法的beginAtZero配置会让框架尝试读取不存在的小数位配置，最终抛出minimumFractionDigits value is out of range错误
• Y轴是数值轴，本身支持beginAtZero，所以配置title不会触发报错

修复方案 #

直接删除X轴配置中的beginAtZero: true即可，修改后的X轴配置参考：

x: {
    ticks: {
        font: {
            size:function(context) {
                var width = context.chart.width;
                var size = 12;
                if(width>320 && width<600) {
                    size = 16;
                } else if(width >= 600) {
                    size = 20;
                }
                return size;
            },
            weight: "bold"
        }
    },
    grid: {
        display: false
    },
    title: {
        text: 'Años',
        display: true
    }
}

修改后X轴标题可以正常显示，不会再抛出相关错误。

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