Chart.js Streaming插件下实现X轴24小时制（HH:MM:SS）时间显示的方法

我完全懂你的困扰！普通Chart.js的X轴时间格式化方案在chartjs-plugin-streaming的实时轴下确实不生效，毕竟这个插件对X轴的渲染逻辑做了特殊处理。不过别担心，咱们有两种靠谱的方法来实现24小时制的HH:MM:SS显示：

方法一：利用插件适配的时间格式配置 #

因为你的X轴类型是realtime，可以直接在X轴配置里添加time.displayFormats来指定显示格式，记得要确保你已经引入了Chart.js的时间适配器（比如moment.js或者date-fns）：

options: {
    plugins: {
        streaming: {
            duration: 20000,
            refresh: 50, 
            delay: 1000, 
            frameRate: 30 
        }
    },
    scales: {
        x: {
            type: 'realtime',
            time: {
                // 针对秒级别的刻度，设置24小时制时分秒格式
                displayFormats: {
                    second: 'HH:mm:ss'
                }
            }
        }
    }
}

方法二：手动通过ticks回调格式化（无需依赖时间适配器） #

如果不想额外引入时间库，直接用原生Date对象的格式化方法也能搞定，通过ticks.callback自定义每个刻度的显示内容：

options: {
    plugins: {
        streaming: {
            duration: 20000,
            refresh: 50, 
            delay: 1000, 
            frameRate: 30 
        }
    },
    scales: {
        x: {
            type: 'realtime',
            ticks: {
                callback: function(value) {
                    // 将时间戳转换为Date对象，然后格式化为24小时制的HH:MM:SS
                    return new Date(value).toLocaleTimeString('en-GB', {
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit',
                        hour12: false
                    });
                }
            }
        }
    }
}

这两种方法都能完美适配chartjs-plugin-streaming的实时X轴，你可以根据自己的项目依赖情况选择其中一种~

备注：内容来源于stack exchange，提问作者Mo711