Chart.js折线图Y轴显示小数时图表无数据如何排查修复

• Y轴ticks里配置的stepSize: 2强制刻度间隔为2，生成的Y轴刻度只有0、2、4……这类整数值，但你传入的绘图数据都是0~1区间的小数，所有数据点都压在0刻度线上，自然没法正常显示折线。
• 如果你用的是3.0及以上版本的Chart.js，旧版2.x的yAxes数组写法已经被废弃，写了也不会生效，会进一步导致刻度配置失效。

• 调整Y轴步长适配小数范围：根据你实际的数值区间设置步长，比如数据在0~1之间就把步长设为0.1或者0.2，同时加回调处理浮点数精度问题，避免出现0.300000000004这类异常显示。
• 匹配你使用的Chart.js版本写配置：
  • Chart.js 3.x/4.x 版本用以下配置：

const config = {
    type: 'line',
    data: {
        datasets: [{
            data: <%=lineData%>,
            borderColor: '#2563eb',
            fill: false,
            tension: 0.2
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 0.2, // 根据数据范围调整，不要超过数据最大值
                    callback: (val) => val.toFixed(1) // 统一保留1位小数
                }
            }
        }
    }
};

• Chart.js 2.x 版本保留原有yAxes结构，只修改步长和精度配置即可：

scales: {
    yAxes: [{
        ticks: {
            beginAtZero: true,
            stepSize: 0.2,
            callback: function(val) {
                return val.toFixed(1)
            }
        }
    }]
}

• 如果改完步长还是不显示，先临时删掉stepSize配置，让Chart.js自动计算Y轴范围，确认数据格式没问题、折线能正常渲染后，再手动调整步长到你想要的间隔。
• 检查lineData格式：如果传的是纯数字数组，必须在data里加和数据长度一致的labels数组对应X轴；如果传的是{x: 值, y: 值}格式的对象数组，不需要额外配labels。

内容的提问来源于stack exchange，提问作者ceyda çınardal