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

Question

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

如果一切都完全用 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

您可以在嵌入另一个JS库block postamble等中描述的背景虚化模板的一部分在这里。然后如果你给你的滑块一个名字，你可以像这样访问它：Python：slider = Slider(start=0, end=10, value=5, name='my_slider')JS：var slider = Bokeh.documents[0].get_model_by_name('my_slider')console.log('slider value before:', slider.value)slider.value = 10console.log('slider value after:', slider.value)这是假设document您的应用程序中只有一个 Bokeh （注意 中的0索引documents[0]）。然后，您可以Slider像在 CustomJS 回调中一样访问和操作该对象，但请注意，在这种情况下，cb_obj和cb_data不可用。请参阅下面的完整工作示例（Bokeh v1.3.0）：external_js.py:from bokeh.io import savefrom bokeh.models import Slider, Columnfrom bokeh.util.browser import viewtemplate = """{% block postamble %}&nbsp; &nbsp; <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var slider = Bokeh.documents[0].get_model_by_name('my_slider')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('slider value before:', slider.value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.value = 10&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('slider value after:', slider.value)&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>{% endblock %}"""slider = Slider(start=0, end=10, value=5, name='my_slider')save(Column(slider), template=template)view("external_js.html")