如何在Chart.js 3.3.2中设置X轴等间隔刻度？

要让X轴等间隔显示「3个月前、1个月前、1周前、1天前」这四个刻度，你需要抛弃默认的类别刻度，改用线性刻度手动控制刻度位置，具体修改如下：

核心思路 #

默认类别刻度会按数据点数量均分X轴宽度，导致数据点多的区间占比大。改用线性刻度后，我们可以把时间区间映射到一个固定数值范围（比如0-100），让四个刻度分别对应0、33.33、66.66、100这四个位置，从而实现等间隔显示。

修改后的完整代码 #

JavaScript部分 #

var ctx = 'myChart';
// 拆分原始数据到三个时间区间：3M-1M、1M-1W、1W-1D
const data3MTo1M = [1308.8,1308.3,1300.5,1306.1,1294.9,1291.1,1277.5,1275.9,1280.1,1273.5,1280.7,1282.2, 1291.5, 1291.4, 1302.2, 1303.8, 1303.1, 1304.3, 1312.8, 1319.4, 1310,1301.7,1300.8,1303.8,1307.3,1303.8, 1295,1291.4 ,1276.2 ,1265.8 ,1266.1 ,1261.6 ,1265.4 ,1265.8 ,1281.7 ,1283.8,1280.7, 1278.7, 1273.4, 1280,1273.8,1280.7];
const data1MTo1W = [1293,1298.8 ,1303.9 ,1304.1,1312.6, 1318.3, 1317.3, 1321.1, 1331.3, 1338.3, 1341.6, 1336.9, 1341.5, 1338.7, 1338];
const data1WTo1D = [1324,  1326.6, 1322.5, 1322,1321.4 ,1322.3 ,1319.2];

// 将每个区间的数据映射到对应的X轴数值范围，保证曲线连续
const mappedData = [
  ...data3MTo1M.map((y, i) => ({x: (i / (data3MTo1M.length - 1)) * 33.33, y})),
  ...data1MTo1W.map((y, i) => ({x: 33.33 + (i / (data1MTo1W.length - 1)) * 33.33, y})),
  ...data1WTo1D.map((y, i) => ({x: 66.66 + (i / (data1WTo1D.length - 1)) * 33.34, y}))
];

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Exchange Rate',
            data: mappedData, // 使用映射后的带x/y坐标的数据
            fill: false,
            backgroundColor: 'transparent',
            borderColor:  '#f26c6d',
            pointBorderColor:'transparent',
            pointBorderWidth:4,
            borderWidth: 2,
            tension: 0.5
        }]
    },
    options: {
        scales: {
            x: { 
                grid: { display: false },
                type: 'linear', // 切换为线性刻度
                min: 0,
                max: 100,
                ticks: {
                    // 自定义刻度显示文本
                    callback: function(value) {
                        if (value === 0) return '3个月前';
                        if (value === 33.33) return '1个月前';
                        if (value === 66.66) return '1周前';
                        if (value === 100) return '1天前';
                        return ''; // 隐藏其他多余刻度
                    },
                    // 指定刻度间隔，保证四个刻度等距
                    stepSize: 33.33,
                    precision: 2
                }
            },
            y: { grid: { display: false }}
        },
        plugins: {
            title: {
                display: true,
                text: "美元汇率",
                padding: {
                    top: 10,
                    bottom: 30
                }
            },
            legend: {
                position:'bottom'
            }
        }
    }
});

HTML部分 #

<div style="height:80vh; width: 100%">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js" integrity="sha512-VCHVc5miKoln972iJPvkQrUYYq7XpxXzvqNfiul1H4aZDwGBGC0lq373KNleaB2LpnC2a/iNfE5zoRYmB4TRDQ==" crossOrigin="anonymous" referrerpolicy="no-referrer"></script>

关键修改说明 #

1. 数据映射：把原始数据按时间区间拆分，每个区间内的数据点x值按比例映射到对应数值范围，保证曲线在不同区间内连续过渡。
2. 线性刻度配置：将x轴类型设为linear，指定数值范围0-100，通过ticks.callback只显示目标刻度文本，stepSize确保刻度间隔一致。
3. 移除类别标签：不再使用labels数组，改用带x/y坐标的对象数组作为数据源，适配线性刻度的要求。

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