HTML/PHP中Chart.js图表无法调整Y轴范围，如何设置为0-10且无小数

解决方案 #

你使用的是Chart.js 2.8.0版本，仅需要修改图表配置中的options.scales字段即可实现需求，将你代码中空的scales配置替换为以下内容：

options: {
    scales: {
        yAxes: [{
            ticks: {
                min: 0, // 强制Y轴最小值为0
                max: 10, // 强制Y轴最大值为10
                stepSize: 1 // 刻度间隔为1，保证无小数刻度
            }
        }]
    }
}

配置说明

• min: 0 禁止Y轴自动根据数据范围收缩起始值，解决数值较低的柱状图看起来接近0的问题
• max: 10 固定Y轴上限为10，如果你后续希望Y轴上限可以自适应超过10的数据、仅默认最低到10，可以将max: 10替换为suggestedMax: 10
• stepSize: 1 固定刻度步长为1，所有刻度都会是整数，不会出现小数

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