为何此CustomJS hover代码无效？Bokeh HoverTool时间格式问题

问题分析 #

你已通过NumeralTickFormatter成功将y轴格式化为00:00:00的时分秒样式，但HoverTool中使用相同格式配置未生效，核心原因是HoverTool的numeral格式化器与NumeralTickFormatter的格式解析逻辑存在差异，直接用00:00:00无法正确识别数值型时间（如总秒数）。

解决方案 #

方法1：自定义JavaScript格式化函数 #

通过CustomJSHover编写格式化逻辑，将数值（如总秒数）转换为时分秒格式：

from bokeh.models import CustomJSHover

# 自定义JS函数：将总秒数转为HH:MM:SS格式
time_formatter = CustomJSHover(code="""
    function formatTime(seconds) {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = Math.floor(seconds % 60);
        // 补零处理，确保每个部分为两位数字
        return [hours, minutes, secs].map(num => num.toString().padStart(2, '0')).join(':');
    }
    return formatTime(value);
""")

p.add_tools(HoverTool(
    tooltips=[("time", "@y")],
    formatters={
        "@y": time_formatter  # 绑定自定义格式化器
    },
    mode='vline'
))

方法2：将数据源转为datetime类型（推荐） #

如果semit是总秒数或时间戳，先转换为Pythondatetime对象，再使用Bokeh内置的datetime格式化器：

from datetime import datetime, timedelta
from bokeh.models import DatetimeTickFormatter

# 假设semit是总秒数，转为以1970-01-01为基准的datetime对象
semit_datetime = [datetime(1970, 1, 1) + timedelta(seconds=s) for s in semit]

source = ColumnDataSource(data=dict(
    x=acts,
    y=semit_datetime,    
))

# 配置HoverTool使用datetime格式化器
p.add_tools(HoverTool(
    tooltips=[("time", "@y{%H:%M:%S}")],
    formatters={
        "@y": 'datetime'
    },
    mode='vline'
))

# y轴同步使用DatetimeTickFormatter
p.yaxis[0].formatter = DatetimeTickFormatter(hours="%H:%M:%S", days="%H:%M:%S")

关键说明 #

• 当y值为**数值型时间（如总秒数）**时，HoverTool的numeral格式化器不支持直接解析为时分秒，需自定义逻辑处理；
• 转为datetime类型后，Bokeh内置的datetime格式化器可统一兼容y轴和HoverTool的格式配置，逻辑更清晰。

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