如何在Bokeh中实现Span线条的点击隐藏或静音功能

核心实现逻辑：Bokeh的Span属于标注类组件，本身默认没有绑定交互事件，我们可以给每个Span单独绑定Tap点击事件的回调，动态修改它的属性即可实现隐藏或者静音效果。

具体实现步骤 #

1. 导入依赖 #

from bokeh.plotting import figure, show
from bokeh.models import Span, CustomJS
from bokeh.events import Tap

2. 初始化基础图表 #

保留你原有的散点、折线逻辑，以及图例点击隐藏功能：

p = figure(width=800, height=400)
# 示例折线、散点
p.line([1,2,3,4,5], [2,5,3,7,1], legend_label="折线", line_width=2)
p.scatter([1,2,3,4,5], [2,5,3,7,1], legend_label="散点", size=8, color="red")
# 原有图例点击隐藏功能保留
p.legend.click_policy = "hide"

3. 给Span绑定点击回调 #

你可以选择点击完全隐藏，或者半透明静音两种效果：

# 示例生成3条垂直辅助线
for x_pos, color in zip([2,3,4], ["green", "orange", "purple"]):
    span = Span(
        location=x_pos, 
        dimension="height", 
        line_color=color, 
        line_width=3
    )
    # 绑定点击回调
    callback = CustomJS(args=dict(span=span), code="""
        // 方案1：点击完全隐藏/显示
        span.visible = !span.visible
        
        // 方案2：点击切换静音（半透明不消失），把上面代码换成下面这句即可
        // span.alpha = span.alpha == 1 ? 0.2 : 1
    """)
    span.js_on_event(Tap, callback)
    p.add_layout(span)

4. 渲染图表 #

show(p)

补充说明 #

如果需要批量控制所有Span的显隐，可以额外添加复选框、按钮组件，把所有Span实例传入回调统一修改属性即可。

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