在Python Bokeh图中动态地连接一个区间和滑块

Question

我正在尝试使用bokeh在python中创建图表，以允许对数据进行动态可视化。值得注意的是，我相对较新于python，非常新于bokeh，而且我不懂javascript。我已经参考了这个链接：在Python中使用Bokeh将Span或Cursor链接到不同的图表和这个链接：

http://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html

但我在实现每个必要部分时遇到了麻烦。在添加所需功能之前，这是我的代码：

from bokeh.layouts import column, widgetbox
from bokeh.models.widgets import Slider
from bokeh.models import Span, CustomJS

output_file('Raw_Spectra_and_Spillover_Data.html')

# widgets for bin setup
Pix1_LowLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 129, step = 1, title = 'Pixel-1 - Low Bin - Low Thresh')
Pix1_LowHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 204, step = 1, title = 'Pixel-1 - Low Bin - High Thresh')
Pix1_HighLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 218, step = 1, title = 'Pixel-1 - High Bin - Low Thresh')
Pix1_HighHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 500, step = 1, title = 'Pixel-1 - High Bin - High Thresh')

plot1spect = figure(width=700, height=250, title='pixel-1 Spectrum')
plot1spect.line(self.SpectDACvals1[0], self.SpectrumData1[0], line_width=2)
plot1spect_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height')
plot1spect_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height')
plot1spect_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height')
plot1spect_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height')
plot1spect.renderers.extend([plot1spect_LowLowSpan, plot1spect_LowHighSpan, plot1spect_HighLowSpan, plot1spect_HighHighSpan])

plot1spill = figure(width=700, height=250, title='pixel-1 Spillover')
plot1spill.line(self.SpillDACvals1[0], self.SpillData1[0], line_width=2)
plot1spill_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height')
plot1spill_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height')
plot1spill_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height')
plot1spill_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height')
plot1spill.renderers.extend([plot1spill_LowLowSpan, plot1spill_LowHighSpan, plot1spill_HighLowSpan, plot1spill_HighHighSpan])

show(row(plot1spect,plot1spill, widgetbox(Pix1_LowLow, Pix1_LowHigh, Pix1_HighLow, Pix1_HighHigh)))

这段代码给我这个：

如果有人能向我展示如何使 Pix1_LowLow 滑块动态控制 plot1spect_LowLowSpan 的位置，那么我就可以将这种技术扩展到其他滑块和范围中。非常感谢！

Python 3.5.2 - Bokeh 12.0

- AJbotic

---

请移除您代码中的缩进。请将图片放入您的问题中，而不是作为链接。请使用 反引号 插入行内代码。请说明您的 Python 版本。 - buhtz

抱歉，已完成。 - AJbotic

如果您能将我提供的完整工作示例标记为正确答案，我将不胜感激。 - bigreddot

感谢 @bigreddot。我完全打算在有时间回到这个任务并实现您的建议时这样做。我应该能够在今天晚些时候或明天这样做。也感谢您所有的教程，它们帮了我很大的忙。 - AJbotic

Answer 1

以下是一个极简完整示例。请注意，添加像 Span 这样的标注的推荐方式是使用如下所示的 plot.add_layout：

from bokeh.layouts import row, widgetbox
from bokeh.models import Slider, Span, CustomJS
from bokeh.plotting import figure, output_file, show

slider = Slider(start=0, end=10, value=3, step=0.1, title='Slider')

plot = figure(width=700, height=250, x_range=(0,10), y_range=(-1, 1))
span = Span(location=slider.value, dimension='height')
plot.add_layout(span)

callback = CustomJS(args=dict(span=span), code="""
    span.location = cb_obj.value
""")
slider.js_on_change('value', callback)

output_file('span_slider.html')

show(row(plot, widgetbox(slider)))

- bigreddot

Answer 2

感谢 @bigreddot 提供的答案。这是实现我的解决方案的代码... 现在如何以编程方式处理128个数据文件呢... 嗯嗯..

    from bokeh.layouts import row, widgetbox
    from bokeh.models import Span, CustomJS, Slider

    output_file('Raw_Spectra_and_Spillover_Data.html')

    # widgets for bin setup
    Pix1_LowLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 129, step = 1, title = 'Pixel-1 - Low Bin - Low Thresh')
    Pix1_LowHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 204, step = 1, title = 'Pixel-1 - Low Bin - High Thresh')
    Pix1_HighLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 218, step = 1, title = 'Pixel-1 - High Bin - Low Thresh')
    Pix1_HighHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 500, step = 1, title = 'Pixel-1 - High Bin - High Thresh')

    plot1spect = figure(width=700, height=250, title='pixel-1 Spectrum')
    plot1spect.line(self.SpectDACvals1[0], self.SpectrumData1[0], line_width=2)
    plot1spect_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height')
    plot1spect.add_layout(plot1spect_LowLowSpan)
    plot1spect_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height')
    plot1spect.add_layout(plot1spect_LowHighSpan)
    plot1spect_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height')
    plot1spect.add_layout(plot1spect_HighLowSpan)
    plot1spect_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height')
    plot1spect.add_layout(plot1spect_HighHighSpan)
    #plot1spect.renderers.extend([plot1spect_LowLowSpan, plot1spect_LowHighSpan, plot1spect_HighLowSpan, plot1spect_HighHighSpan])

    plot1spill = figure(width=700, height=250, title='pixel-1 Spillover')
    plot1spill.line(self.SpillDACvals1[0], self.SpillData1[0], line_width=2)
    plot1spill_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height')
    plot1spill.add_layout(plot1spill_LowLowSpan)
    plot1spill_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height')
    plot1spill.add_layout(plot1spill_LowHighSpan)
    plot1spill_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height')
    plot1spill.add_layout(plot1spill_HighLowSpan)
    plot1spill_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height')
    plot1spill.add_layout(plot1spill_HighHighSpan)
    #plot1spill.renderers.extend([plot1spill_LowLowSpan, plot1spill_LowHighSpan, plot1spill_HighLowSpan, plot1spill_HighHighSpan])

    Pix1_LowLow.callback = CustomJS(args=dict(span1 = plot1spect_LowLowSpan,
                                              span2 = plot1spill_LowLowSpan,
                                              slider = Pix1_LowLow),
                                              code = """span1.location = slider.value; span2.location = slider.value""")
    Pix1_LowHigh.callback = CustomJS(args=dict(span1 = plot1spect_LowHighSpan,
                                               span2 = plot1spill_LowHighSpan,
                                               slider = Pix1_LowHigh),
                                               code = """span1.location = slider.value; span2.location = slider.value""")
    Pix1_HighLow.callback = CustomJS(args=dict(span1 = plot1spect_HighLowSpan,
                                               span2 = plot1spill_HighLowSpan,
                                               slider = Pix1_HighLow),
                                               code = """span1.location = slider.value; span2.location = slider.value""")
    Pix1_HighHigh.callback = CustomJS(args=dict(span1 = plot1spect_HighHighSpan,
                                                span2 = plot1spill_HighHighSpan,
                                                slider = Pix1_HighHigh),
                                                code = """span1.location = slider.value; span2.location = slider.value""")

这里是图表的重复，但现在每个滑块都可以操纵两个图表中相应的跨度...

- AJbotic