如何使用外部JavaScript代码访问和更新Bokeh图或小部件? [英] How to access and update Bokeh plots or widgets using an external JavaScript code?

问题描述

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

I have a Bokeh plot which is controlled by a time Bokeh slider. I am trying to set the time of the slider and the corresponding plotted data to the current time of the browser by clicking on a button.

如果所有内容都完全在JS中开发，我知道该怎么做.但是我正在编写嵌入在HTML文件中的外部JS函数，并且我不知道如何访问Bokeh对象(在本例中为Slider)并对其进行操作.我只能使用回调函数从滑块开始并更改基础数据，而不能相反.我需要使用按钮将滑块的值设置为当前时间！

I know how to do the same thing if everything has been entirely developed in JS. But I am writing an external JS function embedded in the HTML file and I don't know how to access the Bokeh objects (in this case the Slider) and manipulate them. I can only use the callback functions to start from a slider and change the underlying data, but not the other way around. I need to set the value of the slider using a button to the current time!

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库，如所述

You can embed another JS library in the block postamble part of the Bokeh template like described here. Then if you give your slider a name you can access it like this:

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 = 10
console.log('slider value after:', slider.value)

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

This is assuming that you have just one Bokeh document in your app (note that 0 index in documents[0]). Then you can access and manipulate the Slider object the same way like you would do in a CustomJS callback, but note that cb_obj and cb_data are not available in this case.

请参阅下面的完整工作示例(Bokeh v1.3.0):

See complete working example below (Bokeh v1.3.0):

external_js.py:

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

这篇关于如何使用外部JavaScript代码访问和更新Bokeh图或小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！