链接 JS 散景小部件
linking JS bokeh widget
我有两个简单的 bokeh
小部件:一个 Select
和一个 Slider
- 我可以让这两个小部件分开工作,但我找不到获得这两个小部件的方法链接在一起的小部件 - 这样 js_on_change
对其中一个的操作将更新另一个的状态。
我的以下尝试在链接阶段失败了:
from bokeh.models.widgets import Select, Slider
from bokeh.io import output_notebook, show
from bokeh.resources import INLINE
from bokeh.models import ColumnDataSource, CustomJS, Select
from bokeh.layouts import column
output_notebook(INLINE)
options = ['a', 'b', 'c']
indexes = [0, 1, 2]
s1 = ColumnDataSource(data=dict(options=options))
s2 = ColumnDataSource(data=dict(indexes=indexes))
select = Select(title="Option:", options=options)
slider = Slider(title="Index", value=0, start=0, end=len(indexes) -1, step=1)
select_callback = CustomJS(args=dict(options=s1, indexes=s2), code="""
var opt = options.data;
console.log(cb_obj.value,
Object.values(options.data)[0].indexOf(cb_obj.value));""")
slider_callback = CustomJS(args=dict(options=s1, indexes=s2, select=select), code="""
var opt = options.data;
console.log(Object.values(opt)[0][cb_obj.value],
cb_obj.value);""")
select.js_on_change('value', select_callback)
slider.js_on_change('value', slider_callback)
# the following will not work as I am not using it properly
# slider.js_link('value', select, 'value')
show(column(select, slider))
我需要在 JS 代码上有这种行为 运行,
至于我的用例,我需要将生成的小部件嵌入静态 HTML 页面(无散景服务器)。
感谢任何建议!
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import CustomJS, Select
from bokeh.models.widgets import Slider
options = ['a', 'b', 'c']
init_idx = 0
select = Select(title="Option:", options=options, value=options[init_idx])
slider = Slider(title="Index", value=init_idx, start=0, end=len(options) - 1, step=1)
select.js_on_change('value', CustomJS(args=dict(slider=slider),
code="slider.value = cb_obj.options.indexOf(cb_obj.value);"))
slider.js_on_change('value', CustomJS(args=dict(select=select),
code="select.value = select.options[cb_obj.value];"))
show(column(select, slider))
我有两个简单的 bokeh
小部件:一个 Select
和一个 Slider
- 我可以让这两个小部件分开工作,但我找不到获得这两个小部件的方法链接在一起的小部件 - 这样 js_on_change
对其中一个的操作将更新另一个的状态。
我的以下尝试在链接阶段失败了:
from bokeh.models.widgets import Select, Slider
from bokeh.io import output_notebook, show
from bokeh.resources import INLINE
from bokeh.models import ColumnDataSource, CustomJS, Select
from bokeh.layouts import column
output_notebook(INLINE)
options = ['a', 'b', 'c']
indexes = [0, 1, 2]
s1 = ColumnDataSource(data=dict(options=options))
s2 = ColumnDataSource(data=dict(indexes=indexes))
select = Select(title="Option:", options=options)
slider = Slider(title="Index", value=0, start=0, end=len(indexes) -1, step=1)
select_callback = CustomJS(args=dict(options=s1, indexes=s2), code="""
var opt = options.data;
console.log(cb_obj.value,
Object.values(options.data)[0].indexOf(cb_obj.value));""")
slider_callback = CustomJS(args=dict(options=s1, indexes=s2, select=select), code="""
var opt = options.data;
console.log(Object.values(opt)[0][cb_obj.value],
cb_obj.value);""")
select.js_on_change('value', select_callback)
slider.js_on_change('value', slider_callback)
# the following will not work as I am not using it properly
# slider.js_link('value', select, 'value')
show(column(select, slider))
我需要在 JS 代码上有这种行为 运行, 至于我的用例,我需要将生成的小部件嵌入静态 HTML 页面(无散景服务器)。
感谢任何建议!
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import CustomJS, Select
from bokeh.models.widgets import Slider
options = ['a', 'b', 'c']
init_idx = 0
select = Select(title="Option:", options=options, value=options[init_idx])
slider = Slider(title="Index", value=init_idx, start=0, end=len(options) - 1, step=1)
select.js_on_change('value', CustomJS(args=dict(slider=slider),
code="slider.value = cb_obj.options.indexOf(cb_obj.value);"))
slider.js_on_change('value', CustomJS(args=dict(select=select),
code="select.value = select.options[cb_obj.value];"))
show(column(select, slider))