如何同时触发多个Bokeh图表的Hover及Tooltip功能？

要实现共享Y轴的多个图表在CrosshairTool触发时同步显示Tooltip，可通过以下方式修改代码：

核心思路 #

让HoverTool关联对应图表的渲染器，同时开启跨图表同步触发，配合共享的CrosshairTool，实现十字准线移动时所有图表的Tooltip同时显示。

修改后的完整代码 #

import numpy as np
import pandas as pd
from bokeh.plotting import figure, show
from bokeh.layouts import row
from bokeh.models import HoverTool, CrosshairTool, ColumnDataSource, Span

df = pd.DataFrame({
    'depth': np.linspace(1000,1100,201),
    'x1': np.linspace(80,90,201)+np.random.rand(201),
    'x2': np.linspace(2.5,3.5,201)+np.random.rand(201)/10
})

source = ColumnDataSource(df)

p1 = figure(y_range=(df['depth'].max(),df['depth'].min()),
            width=400,height=600,y_axis_label='Depth (m)')
p2 = figure(y_range=p1.y_range,width=400, height=600)

# 绘制线条并保存渲染器对象，用于绑定HoverTool
line1 = p1.line('x1','depth',source=source, line_width=2, color='blue')
line2 = p2.line('x2','depth',source=source, line_width=2, color='green')

# 创建共享的CrosshairTool，保证十字准线同步
xspan = Span(dimension="width",line_width=0.5)
crosshair = CrosshairTool(overlay=xspan)
p1.add_tools(crosshair)
p2.add_tools(crosshair)

# 配置两个HoverTool，分别对应不同图表的线条，开启同步触发
hover1 = HoverTool(
    renderers=[line1],
    tooltips=[('', '@depth{0.0} m'),('', '@x1{0.0} °C')],
    mode='hline',
    attachment="above",
    shared=True
)

hover2 = HoverTool(
    renderers=[line2],
    tooltips=[('','@depth{0.00} m'),('','@x2{0.00} µs/ft')],
    mode='hline',
    attachment="above",
    shared=True
)

p1.add_tools(hover1)
p2.add_tools(hover2)

layout = row(p1,p2)
show(layout)

关键修改点 #

• 保存线条渲染器：绘制线条时保留返回的line1、line2对象，用于绑定对应HoverTool，确保Tooltip只关联目标图表的数据。
• 开启shared=True：让HoverTool在共享数据源的图表间同步触发，只要鼠标悬停在Crosshair位置，所有关联的Tooltip都会显示。
• 共享Crosshair实例：两个图表使用同一个CrosshairTool和Span，保证十字准线在所有图表中同步移动。

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