散景:显示/隐藏人物的小部件 [英] Bokeh: Widget to Show/Hide Figures
问题描述
Looking to do something along the lines of a UI as here: Bokeh: Using Checkbox widget to hide and show plots wherein I can selectively show/hide the whole figure in a column of figures. A drop down menu (OptionMenu with multiple selections) where I could select which plots showed up (assuming I could name the figures) would be preferable.
我对JS不熟悉,有什么指导吗? (提前感谢)
I am not familiar with JS, any guidance? (Thanks in advance)
我希望图像不再可见,下一个数字会像这样跳起来:
I'd hope that the image wouldn't be visible anymore and the next figure would jump up like so:
例如:
我在一列中有多个数字,生成为:
I have multiple figures in a column generated as:
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版中没有visible
切换.因此,您将必须重置布局小部件的children
值.我不太确定您打算通过下拉菜单进行哪种互动.这是带有复选框的完整示例:
Plots don't have a visible
toggle, at least as of version 0.13. So you will have to reset the children
value of the layout widget. I'm not quite sure what interaction you intend with a dropdown. Here is a complete example with a checkbox:
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))
您可以使用MultiSelect
做类似的事情:
You could do something similar with a MultiSelect
:
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"转换为数字.
Small FYI that that code is a little sloppy—it's relying on JS implicitly casting strings like "0" to numbers.
这篇关于散景:显示/隐藏人物的小部件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!