Chart.js如何仅将新增X轴数据单位改为秒，保留原有小时单位

问题背景 #

现有折线图使用Chart.js的时间轴（time scale），初始数据X轴以hour为单位显示（格式HH），新增数据需要以second为单位显示（格式HH:mm:ss），但直接修改全局time.unit会导致所有X轴刻度单位统一变化，无法实现差异化显示。

解决方案 #

利用Chart.js的ticks.callback自定义刻度格式化逻辑，根据数据的时间跨度自动选择显示格式，无需修改全局单位设置。

修改后的完整代码 #

chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: category, // 确保此处为Date对象数组，而非字符串
        datasets: [
            { label: "data1", data: data1 },
            { label: "data2", data: data2 },
            { label: "data3", data: data3 }
        ]
    },
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    displayFormats: {
                        second: 'HH:mm:ss',
                        minute: 'HH:mm',
                        hour: 'HH'
                    }
                },
                ticks: {
                    callback: function(value, index, values) {
                        // 获取当前刻度对应的时间对象
                        const currentDate = this.getLabelForValue(value);
                        // 获取最新数据的时间
                        const latestDate = chart.data.labels[chart.data.labels.length - 1];
                        // 计算时间差（小时）
                        const timeDiffHours = (latestDate - currentDate) / (1000 * 60 * 60);
                        
                        // 差异化显示：最近1小时内的数据用秒级格式，历史数据用小时级格式
                        if (timeDiffHours < 1) {
                            return Chart.time.format(currentDate, 'HH:mm:ss');
                        } else {
                            return Chart.time.format(currentDate, 'HH');
                        }
                    }
                }
            }
        }
    }
});

function addChartData(label, newData) {
    // 确保新增的label是Date对象
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        Object.keys(newData).forEach(type => {
            if (type === dataset.label) {
                dataset.data.push(newData[type]);
            }
        });
    });

    if(chart.data.datasets[0].data.length > 24){
        chart.data.labels.shift();
        chart.data.datasets.forEach((dataset) => {
            dataset.data.shift();
        });
    }
   
    chart.update();
}

关键说明 #

1. 时间对象要求：labels数组必须存储Date类型对象，而非字符串，否则无法正确计算时间差和格式化。
2. 自定义回调逻辑：通过ticks.callback判断当前刻度时间与最新数据时间的差值，自动选择对应的显示格式。你可以根据实际需求调整时间差阈值（比如改为30分钟）。
3. 保留原有功能：无需修改addChartData的核心逻辑，仅通过X轴配置实现差异化显示。

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