Bokeh中如何使用TapTool点击点位展示原HoverTool的关联提示数据

核心逻辑说明 #

你需要新增一个Div组件用来承载点位详情的展示内容，TapTool触发的回调只需要完成「读取选中点位索引→从数据源拉取对应数据→拼接为可视化内容更新到Div」三步即可，不需要复杂的JS逻辑。
Bokeh的CustomJS参数传递规则非常简单：你在args字典里传入的Python端Bokeh对象，在JS代码段中可以直接通过字典的key作为变量名访问。

完整修改代码 #

第一步：新增Div组件（加在绘图代码之前） #

# 新增：创建信息展示容器
info_div = Div(width=1000, height=120, text="<b>点击任意点位查看详细数据</b>")

第二步：补全CustomJS回调代码 #

callback = CustomJS(args=dict(source=geo_source, div=info_div), code="""
// 获取选中的点位索引
const selected_indices = source.selected.indices;
if (selected_indices.length === 0) {
    div.text = "<b>点击任意点位查看详细数据</b>";
    return;
}
// 取第一个选中的点位（TapTool默认是单选模式）
const idx = selected_indices[0];
// 从数据源中提取对应点位的所有字段，可根据你的数据集增减字段
const data = source.data;
const content = `
<b>选中点位详情：</b><br>
经度：${data['Longitude'][idx].toFixed(4)}<br>
纬度：${data['Latitude'][idx].toFixed(4)}<br>
中位数收入：${data['MedInc'][idx].toFixed(2)}<br>
房屋均价：${data['price'][idx].toFixed(0)}美元<br>
平均房间数：${data['AveRooms'][idx].toFixed(1)}<br>
平均卧室数：${data['AveBedrms'][idx].toFixed(1)}<br>
区域人口：${data['Population'][idx].toFixed(0)}
`;
// 更新Div的展示内容
div.text = content;
"""
)

taptool = TapTool(callback=callback)
cal.add_tools(taptool)

第三步：组装布局并渲染 #

把原来单独渲染图表的逻辑替换为渲染包含图表和信息Div的布局：

# 组装布局
page_layout = layout([
    [cal],
    [info_div]
])

# 渲染展示
show(page_layout)

可选调整项 #

• 如果需要支持多选展示多个点位信息，只需遍历selected_indices数组，把所有索引对应的数据都拼接到content字符串中即可
• 可以自定义Div的样式、宽高，或者把Div放在图表的侧边，只需调整layout的布局参数即可

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