Bokeh中为多Y轴设置独立RangeSlider的实现方法

你已经通过p0.line()、extra_y_ranges和LinearAxes实现了多Y轴布局，主Y轴的RangeSlider也已配置完成。要关联额外Y轴的RangeSlider，核心是找到额外Y轴对应的范围对象——它们都存在p0.extra_y_ranges这个字典里，键就是你定义额外Y轴时指定的y_range_name。

完整实现示例 #

1. 创建多Y轴图表

from bokeh.plotting import figure, show
from bokeh.models import Range1d, LinearAxis, RangeSlider
from bokeh.layouts import row

# 初始化主图表，设置主Y轴范围
p0 = figure(y_range=(-10, 400), width=800, height=400)

# 绘制主Y轴折线
p0.line([1,2,3,4], [50, 200, 300, 350], color="blue", legend_label="主Y轴数据")

# 添加第一个额外Y轴
p0.extra_y_ranges["y2"] = Range1d(start=0, end=100)
p0.add_layout(LinearAxis(y_range_name="y2"), 'right')
p0.line([1,2,3,4], [20, 50, 70, 90], color="red", y_range_name="y2", legend_label="额外Y轴1数据")

# 添加第二个额外Y轴
p0.extra_y_ranges["y3"] = Range1d(start=-50, end=50)
p0.add_layout(LinearAxis(y_range_name="y3"), 'right')
p0.line([1,2,3,4], [-30, 0, 20, 40], color="green", y_range_name="y3", legend_label="额外Y轴2数据")

2. 配置各Y轴对应的RangeSlider

# 主Y轴滑块（你已实现的代码）
range_slider_c = RangeSlider(
    title="主Y轴",
    start=-10,
    end=400,
    step=1,
    value=(-1, 300),
    height=250,
    orientation='vertical',
    show_value=False,
    direction='rtl'
)
range_slider_c.js_link("value", p0.y_range, "start", attr_selector=0)
range_slider_c.js_link("value", p0.y_range, "end", attr_selector=1)

# 第一个额外Y轴滑块
range_slider_y2 = RangeSlider(
    title="额外Y轴1",
    start=0,
    end=100,
    step=1,
    value=(0, 100),
    height=250,
    orientation='vertical',
    show_value=False,
    direction='rtl'
)
# 关联到extra_y_ranges中的"y2"范围对象
range_slider_y2.js_link("value", p0.extra_y_ranges["y2"], "start", attr_selector=0)
range_slider_y2.js_link("value", p0.extra_y_ranges["y2"], "end", attr_selector=1)

# 第二个额外Y轴滑块
range_slider_y3 = RangeSlider(
    title="额外Y轴2",
    start=-50,
    end=50,
    step=1,
    value=(-50, 50),
    height=250,
    orientation='vertical',
    show_value=False,
    direction='rtl'
)
range_slider_y3.js_link("value", p0.extra_y_ranges["y3"], "start", attr_selector=0)
range_slider_y3.js_link("value", p0.extra_y_ranges["y3"], "end", attr_selector=1)

3. 组合布局并展示

show(row(p0, range_slider_c, range_slider_y2, range_slider_y3))

关键要点 #

• 额外Y轴的范围对象存储在p0.extra_y_ranges字典中，键为你设置的y_range_name字符串
• 用js_link关联滑块和范围的逻辑和主Y轴完全一致，只需将目标对象从p0.y_range替换为p0.extra_y_ranges["你的键名"]

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