使用滑块以交互方式将 Bokeh 中的绘图更改为 select 列

Question

我的问题与非常相似，但我仍然找不到如何使答案适应我的问题。

我有一个包含 100 列的数据框。我想在 Bokeh 中使用两个滑块 select 一列显示在图中。我想用 CDSView 做这个。

假设列的名称是这样的：["11", "12", .."99"]。另外，我有一列“x”，它是 x 轴并且不会改变。第一个滑块，范围 [0-9]，应该 select 列名称的第一个数字。第二个滑块应该以相同的方式 select 最后两位数。

这意味着如果用户在第一个和第二个滑块上 selects 2, 5，Bokeh 将使用我的数据框中的“25”列显示绘图。

我该怎么做？

Answer 1

所以我找到了一个解决方案，使用了其他问题的一些片段。

这是一个工作示例 (Bokeh 2+)，我希望将来有人会发现它有用。

import pandas as pd
from bokeh.plotting import figure, show, ColumnDataSource
from bokeh.layouts import column
from bokeh.models import CustomJS, Slider


df = pd.DataFrame([[1,2,3,4,5],[2,20,3,10,20]], columns = ['1','21','22','31','32'])
source_available = ColumnDataSource(df)
source_visible = ColumnDataSource(data = dict(x = df['1'], y = df['21']))

p = figure(title = 'SLIMe')
p.circle('x', 'y', source = source_visible)

slider1 = Slider(title = "SlideME", value = 2, start = 2, end = 3, step = 1)
slider2 = Slider(title = "SlideME2", value = 1, start = 1, end = 2, step = 1)

slider1.js_on_change('value', CustomJS(
    args=dict(source_visible=source_visible,
              source_available=source_available,
              slider1 = slider1,
              slider2 = slider2), code="""
        var sli1 = slider1.value;
        var sli2 = slider2.value;
        var data_visible = source_visible.data;
        var data_available = source_available.data;
        data_visible.y = data_available[sli1.toString() + sli2.toString()];
        source_visible.change.emit();
    """) )
slider2.js_on_change('value', CustomJS(
    args=dict(source_visible=source_visible,
              source_available=source_available,
              slider1 = slider1,
              slider2 = slider2), code="""
        var sli1 = slider1.value;
        var sli2 = slider2.value;
        var data_visible = source_visible.data;
        var data_available = source_available.data;
        data_visible.y = data_available[sli1.toString() + sli2.toString()];
        source_visible.change.emit();
    """) )


show(column(p, slider1, slider2))

使用滑块以交互方式将 Bokeh 中的绘图更改为 select 列

Interactively change a plot in Bokeh using sliders to select column

python

pandas

bokeh

bokehjs