如何在bokeh中创建加载指示器?

问题描述

我正在使用Bokeh的单选按钮.我希望能够在单击单选按钮时显示一个加载指示器，然后在python回调完成后显示它已完成.您如何用Bokeh做到这一点?

I am using a radio button with Bokeh. I want to be able to show a loading indicator when a radio button is clicked and then show that it has finished after the python callback has completed. How do you do this with Bokeh?

我已经尝试将js_onchange和onchange组合用于单选按钮.我只是想不出一种方法来在Python回调完成后通知JS方面.

I've tried using combinations of js_onchange with onchange for the radio buttons. I just can't come up with a way to notify the JS side of things when the Python callback is completed.

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更改为已完成.

When I run it the innerHTML gets set to loading and the on_change Python callback runs and the graph updates but I have no way to trigger a change on the JS side of things change the innerHTML to say done.

推荐答案

假设用户已经在视图中看到了一个图，一个选择是在图范围的 start 属性上设置一个回调，因此当情节更新时将触发它.

Assuming the user already have a plot in view one option would be to set a callback on the start attribute of the plot's range so it will be triggered when the plot gets updated.

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)

请参见下面的工作示例:

See working example below:

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)

这篇关于如何在bokeh中创建加载指示器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！