如何使用外部JavaScript代码访问和更新Bokeh绘图或小部件?
我有一个波基图,它由一个时间波基滑块控制。我试图通过单击按钮将滑块的时间和相应的打印数据设置为浏览器的当前时间 如果一切都是用JS开发的,我知道如何做同样的事情。但是我正在编写一个嵌入在HTML文件中的外部JS函数,我不知道如何访问Bokeh对象(在本例中是滑块)并操纵它们。我只能使用回调函数从滑块开始更改基础数据,但不能反过来。我需要使用按钮将滑块的值设置为当前时间如何使用外部JavaScript代码访问和更新Bokeh绘图或小部件?,javascript,plot,callback,bokeh,Javascript,Plot,Callback,Bokeh,我有一个波基图,它由一个时间波基滑块控制。我试图通过单击按钮将滑块的时间和相应的打印数据设置为浏览器的当前时间 如果一切都是用JS开发的,我知道如何做同样的事情。但是我正在编写一个嵌入在HTML文件中的外部JS函数,我不知道如何访问Bokeh对象(在本例中是滑块)并操纵它们。我只能使用回调函数从滑块开始更改基础数据,但不能反过来。我需要使用按钮将滑块的值设置为当前时间 callback = CustomJS( JS Code to cahnge the data; ) Timeslider =
callback = CustomJS( JS Code to cahnge the data; )
Timeslider = DateSlider(start=dt(2019, 9, 1, 16, 0, 0), end=dt(2019, 9, 2, 8, 0, 0), value=dt(2019, 9, 1, 16, 0, 0), step=1)
callback.args['time_slider'] = Timeslider
Timeslider.js_on_change('value', callback)
您可以在Bokeh模板的
block postamble
部分嵌入另一个JS库,如所述。然后,如果为滑块命名,则可以如下方式访问滑块:
Python:
slider=slider(开始=0,结束=10,值=5,name='my_slider')
JS:
var slider=Bokeh.documents[0]。按名称获取模型(“我的滑块”)
console.log('slider value before:',slider.value)
slider.value=10
console.log('slider value after:',slider.value)
这是假设您的应用程序中只有一个Bokeh文档
(请注意0
索引位于documents[0]
)。然后,您可以像在CustomJS回调中一样访问和操作滑块
对象,但请注意,cb_obj
和cb_data
在这种情况下不可用
请参阅下面的完整工作示例(Bokeh v1.3.0):
外部_js.py:
from bokeh.io import save
from bokeh.models import Slider, Column
from bokeh.util.browser import view
template = """
{% block postamble %}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
var slider = Bokeh.documents[0].get_model_by_name('my_slider')
console.log('slider value before:', slider.value)
slider.value = 10
console.log('slider value after:', slider.value)
});
</script>
{% endblock %}
"""
slider = Slider(start=0, end=10, value=5, name='my_slider')
save(Column(slider), template=template)
view("external_js.html")
从bokeh.io导入保存
从bokeh.models导入滑块,列
从bokeh.util.browser导入视图
模板=“”“
{%block postamble%}
$(文档).ready(函数(){
var slider=Bokeh.documents[0]。按名称获取模型(“我的滑块”)
console.log('slider value before:',slider.value)
slider.value=10
console.log('slider value after:',slider.value)
});
{%endblock%}
"""
slider=slider(开始=0,结束=10,值=5,name='my_slider')
保存(列(滑块),模板=模板)
视图(“external_js.html”)