如何使用外部 JavaScript 代碼訪問和更新散景圖或小部件？

Question

我有一個由時間 Bokeh slider 控制的 Bokeh plot。 我正在嘗試通過單擊按鈕將 slider 的時間和相應的繪圖數據設置為瀏覽器的當前時間。

如果一切都完全用 JS 開發，我知道如何做同樣的事情。 但是我正在編寫嵌入在 HTML 文件中的外部 JS function 並且我不知道如何訪問 Bokeh 對象（在本例中為 Slider）並操作它們。 我只能使用回調函數從 slider 開始並更改底層數據，但不能反過來。 我需要使用按鈕將 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 庫，如此處所述。 然后，如果你給你的 slider 一個名字，你可以像這樣訪問它：

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 object，但請注意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")