Python Bokeh：显示/隐藏图形的小部件

希望沿着UI的线条做一些事情，如这里所示：在这里，我可以有选择地在一列图形中显示/隐藏整个图形。一个下拉菜单（带有多个选项的OptionMenu），在这里我可以选择显示哪些图（假设我可以命名这些图）更可取

我不熟悉JS，有什么指导吗？（提前感谢）

我希望图像不再可见，下一个人物会像这样跳起来：

例如：

我在一列中有多个数字，生成为：

from bokeh.io import output_file, show
from bokeh.layouts import column
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create a new plot
s1 = figure(plot_width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

# create another one
s2 = figure(plot_width=250, plot_height=250, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# create and another
s3 = figure(plot_width=250, plot_height=250, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)

# put the results in a column and show
show(column(s1, s2, s3))

---

至少从0.13版开始，绘图没有可见的切换开关。因此，您必须重置布局小部件的

子项

值。我不太确定你打算用下拉菜单进行什么样的交互。下面是一个带有复选框的完整示例：

from bokeh.io import output_file, show
from bokeh.layouts import column, row
from bokeh.plotting import figure
from bokeh.models import CheckboxGroup, CustomJS

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

s1 = figure(plot_width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

s2 = figure(plot_width=250, plot_height=250, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

s3 = figure(plot_width=250, plot_height=250, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)

col = column(s1, s2, s3)

checkbox = CheckboxGroup(labels=["Plot 1", "Plot 2", "Plot 3"],
                         active=[0, 1, 2], width=100)

callback = CustomJS(args=dict(plots=[s1,s2, s3], col=col, checkbox=checkbox), code="""
const children = []
for (const i of checkbox.active) {
     children.push(plots[i])
} 
col.children = children
""")
checkbox.js_on_change('active', callback)

show(row(checkbox, col))

您可以使用

多选按钮执行类似操作：

select = MultiSelect(options=[("0", "Plot 1"), ("1", "Plot 2"), ("2", "Plot 3")],
                       value=["0", "1", "2"], width=100)

callback = CustomJS(args=dict(plots=[s1,s2, s3], col=col, select=select), code="""
const children = []
for (const i of select.value) {
    children.push(plots[i])
}
col.children = children
""")
select.js_on_change('value', callback)

仅供参考，该代码有点草率，它依赖于JS隐式地将字符串“0”转换为数字
 
s1.tags、s2.tags、s3.tags=['Foo']、['Bar']、['Arr']#命名绘图
曲线图=[s1、s2、s3]
标签=[（绘图[i]。标记[0]），用于范围内的i（len（绘图））]
活动=列表（范围（0，长度（绘图）））
chkbx=复选框按钮组（标签=标签，活动=活动）
callback=CustomJS（args=dict（plots=plots，chkbx=chkbx），code=”“”
for（设i=0；i

感谢@ BigReDoT及其为解决方案奠定基础。
这与复选框很好。对于下拉菜单，我的想法就像是一个选项菜单，您可以在列表中选择所需的绘图。啊，您可以用它做类似的事情您不会碰巧知道CustomJS和multiselect的教程吧？我可以使用复选框的活动部分禁用特定的复选框，加载图像时，是否有某种方法在开始时调用此回调，以便在开始时仅显示图像1和3？对其进行处理，并了解如何执行^。我会更新答案。