如何在散景中创建加载指示器？

Question

我正在使用带有Bokeh的单选按钮。我希望能够在单击单选按钮时显示加载指示符，然后在python回调完成后显示它已完成。你如何用Bokeh做到这一点？

我已经尝试使用js_onchange和onchange的组合来收听单选按钮。当Python回调完成时，我无法想出一种方法来通知JS方面的事情。

callback = CustomJS(args={}, code="""
  document.getElementById('message_display').innerHTML = 'loading...';
""")

radio_button.js_on_change('active', callback)
radio_button.on_change('active', some_other_callback)

当我运行它时，innerHTML被设置为加载并且on_change Python回调运行并且图形更新但是我没有办法触发JS方面的改变，事情改变了innerHTML说完了。

Answer 1

假设用户已经在视图中有一个选项，一个选项是在绘图范围的start属性上设置回调，以便在绘图更新时触发。

from bokeh.models import CustomJS

p = figure()

def python_callback()
    p.y_range = Range1d(None, None)
    # get your data here and update the plot

code = "document.getElementById('message_display').innerHTML = 'loading finished';"
callback = CustomJS(args = dict(), code = code)
p.y_range.js_on_change('start', callback)

见下面的工作示例：

import numpy as np
from bokeh.plotting import figure, show
from bokeh.models import CustomJS, ColumnDataSource

points = np.random.rand(50, 2)
cds = ColumnDataSource(data = dict(x = points[:, 0], y = points[:, 1]))

p = figure(x_range = (0, 1), y_range = (0, 1))
p.scatter(x = 'x', y = 'y', source = cds)

cb_to_make_selection = CustomJS(args = {'cds': cds}, code = """
function getRandomInt(max){return Math.floor(Math.random() * Math.floor(max));}
cds.selected.indices = [getRandomInt(cds.get_length()-1)]
""")

p.x_range.js_on_change('start', cb_to_make_selection)

show(p)