如何使用外部JavaScript代码访问和更新Bokeh绘图或小部件？

Question

我有一个Bokeh图，它是由一个时间Bokeh滑块控制的。我试图通过单击按钮将滑块的时间和相应的绘图数据设置为浏览器的当前时间。

如果所有东西都是用JS开发的，我知道如何做同样的事情。但是我正在编写一个嵌入在HTML文件中的外部JS函数，我不知道如何访问Bokeh对象(在本例中是Slider)并对它们进行操作。我只能使用回调函数从滑块开始并更改基础数据，而不是反过来。我需要使用一个按钮将滑块的值设置为当前时间！

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)

Answer 1

您可以在Bokeh模板的block postamble部分嵌入另一个JS库，如描述的这里。然后，如果您给滑块一个名称，您可以这样访问它：

Python：

slider = Slider(start=0, end=10, value=5, name='my_slider')

联署材料：

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)

这是假设您的应用程序中只有一个Bokeh document (注意，0索引在documents[0]中)。然后，您可以像在Slider回调中一样访问和操作CustomJS对象，但请注意，在这种情况下，cb_obj和cb_data是不可用的。

参见下面完整的工作示例(Bokeh v1.3.0)：

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