Chart.js 4.4.0中如何设置横轴标签为步长10的整数刻度

问题根源 #

你设置stepSize无效的核心原因是：当通过data.labels提供横轴数据时，Chart.js默认将x轴识别为类别轴，而stepSize是线性轴的专属配置参数，因此不会生效。

修复方案 #

需要将x轴类型强制设置为'linear'，同时调整刻度配置确保显示步长为10的整数，修改后的完整代码如下：

var ImpData = {
    type: 'line',
    data: {
        labels: [0.0001,2.5,5.0001,7.5,12.5,15.0001,17.5,20.0001,22.5,25.0001,27.5,30.0001,32.5,35.0001,37.5,40.0001,42.5,45.0001,47.5,50.0001,52.5,55.0001,57.5,60.0001,62.5,65.0001,67.5,70.0001,72.5,75.0001,77.5,80.0001,82.5,85.0001,87.5,90.0001,92.5,95.0001,97.5],
        datasets: [
            {
                label: 'ix',
                data: [-7.0200000000000005,-7.0200000000000005,-6.24,-6.24,-5.46,-4.68,-4.68,-3.9000000000000004,-3.9000000000000004,-3.9000000000000004,-3.9000000000000004,-3.12,-2.34,39.0001,-3.12,31.98,44.46,28.080000000000002,10.92,3.12,-3.12,-7.800000000000001,-10.14,-9.36,-7.800000000000001,-6.24,-4.68,-2.34,0.0001,0.78,2.34,2.34,1.56,0.78,0.0001,-0.78,-7.800000000000001,-7.800000000000001,-7.800000000000001],
                backgroundColor: 'rgba(168, 218, 220, 0.5)',
                borderColor: 'rgba(168, 218, 220, 0.5)',
                yAxisID: 'y1'
            }
        ]
    },
    options: {
        plugins:{
            title:{
                display: true,
                text: 'Impact (g)',
                color: 'black',
                font:{
                    size: '16px',
                    weight: 'bold'
                }
            },
            legend: {
                labels:{
                    color: 'black'
                }
            },
            tooltips: {
                mode: 'nearest',
                intersect: false
            }
        },
        scales: {
            x: {
                // 关键：将x轴设置为线性轴
                type: 'linear',
                title: {
                    display: true,
                    text: 'TIME',
                    align: 'center',
                    color: 'black',
                    font:{
                        size: '18px',
                        weight: 'bold'
                    }
                },
                ticks: {
                    color: 'black',
                    min: 0,
                    max: 100,
                    stepSize: 10,
                    // 确保刻度显示为整数
                    callback: function(value) {
                        return value.toFixed(0);
                    },
                    font: {
                        size: '18px',
                        weight: 'bold'
                    }
                },
                // 可选：强制显示所有步长刻度，避免自动跳过
                autoSkip: false
            },
            y1: {
                title: {
                    display: true,
                    text: 'Acceleration',
                    align: 'center',
                    color: 'black',
                    font:{
                        size: '18px',
                        weight: 'bold'
                    }
                },
                ticks: {
                    color: 'black',
                    font: {
                        size: '18px',
                        weight: 'bold'
                    }
                }
            }
        }    
    }
};

关键改动说明 #

1. 切换轴类型：在scales.x中添加type: 'linear'，让Chart.js将横轴识别为数值轴，此时stepSize配置会生效。
2. 格式化刻度显示：通过ticks.callback将刻度值转为整数，保证显示为0,10,20...100这类格式。
3. 强制显示所有刻度：添加autoSkip: false可避免Chart.js自动跳过部分刻度，确保所有步长为10的刻度都能展示。

修改后，横轴会按照需求显示整数刻度，同时折线图会基于原始小数时间数据正确绘制。

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