Question

我的问题与this one非常相似，但我仍然找不到如何根据我的问题调整答案。

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

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

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

我该怎么做？

Answer 1

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

这是一个工作示例（散景 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))

使用滑块以交互方式更改散景中的绘图以选择列

1 个答案: