Боке: виджет для отображения / скрытия фигур - PullRequest
Новая
       5

Боке: виджет для отображения / скрытия фигур

0 голосов
/ 20 сентября 2018

Нужно сделать что-то в духе пользовательского интерфейса, как здесь: Боке: Использование виджета «Флажок» для скрытия и отображения графиков , в котором я могу выборочно показать / скрыть всю фигуру в столбце цифр.Было бы предпочтительнее выпадающее меню (OptionMenu с несколькими вариантами выбора), где я мог бы выбрать, какие графики будут отображаться (при условии, что я могу назвать цифры).

Я не знаком с JS, какие-либо рекомендации?(Заранее спасибо)

Я надеюсь, что изображение больше не будет видно, и следующая цифра будет подпрыгивать примерно так:

например: enter image description here

У меня есть несколько цифр в столбце, сгенерированном как: 

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))

1 Ответ

0 голосов
/ 20 сентября 2018

Графики не имеют переключателя visible, по крайней мере, с версии 0.13.Поэтому вам придется сбросить значение children виджета макета.Я не совсем уверен, какое взаимодействие вы намереваетесь с выпадающим.Вот полный пример с флажком: 

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: 

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)

Небольшой FYI, что этот код немного неаккуратный - он полагаетсяна JS неявное приведение строк типа «0» к числам.

...