Bokeh 如何在回调函数中存储和检索状态

在本文中，我们将介绍如何在Bokeh的回调函数中存储和检索状态。Bokeh是一个用于交互式数据可视化的Python库，它提供了一个灵活的机制来处理用户界面的交互行为。在交互的过程中，我们经常需要保存一些状态信息，以便在后续的步骤中使用。Bokeh提供了几种方法来存储和检索这些状态，在本文中我们将重点介绍其中的一些方法。

阅读更多：Bokeh 教程

使用CustomJS回调函数

在Bokeh中，我们可以使用CustomJS回调函数来处理交互事件。CustomJS允许我们在Javascript中编写回调函数，然后将其绑定到特定的事件上。在回调函数中，我们可以使用Bokeh提供的全局变量source来存储和检索状态。例如，我们可以使用一个source来保存一个计数器：

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

# 创建一个空数据源
source = ColumnDataSource(data=dict(count=[]))

# 用于更新计数器的CustomJS回调函数
callback = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    var count = data['count'];
    if (count.length === 0) {
        count.push(0);
    }
    count[0] += 1;
    source.change.emit();
""")

# 创建一个按钮，并将回调函数绑定到按钮的点击事件上
button = Button(label="增加计数器", callback=callback)

# 创建一个显示计数器的文本框
text = Div(text="""
    <h1>计数器: <span id="count">0</span></h1>
""")

# 将按钮和文本框放入一个列布局中
layout = column(button, text)

show(layout)

在上面的例子中，我们创建了一个空的数据源source，其中只包含一个键为count的空列表。然后，我们创建一个CustomJS回调函数，该回调函数在每次按钮被点击时被调用。在回调函数内部，我们通过检查count列表的长度，判断是否是第一次点击按钮。如果是第一次点击，我们就向count列表中添加一个初始值0。然后，我们将count列表的第一个元素加1，表示计数器的增加。最后，我们调用source.change.emit()来通知Bokeh更新数据源的状态。

上述代码将生成一个包含一个按钮和一个显示计数器的文本框的交互式界面。每次点击按钮，计数器的值都会增加一次，并显示在文本框中。

使用CustomJS回调函数中的全局变量

除了使用source作为数据源来存储状态，我们还可以使用CustomJS回调函数中的其他全局变量。Bokeh提供了一些内置的全局变量，例如cb_obj代表当前触发事件的对象，cb_data代表回调函数的数据字典。我们可以利用这些全局变量来存储和检索状态信息。

import numpy as np
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure, show
from bokeh.layouts import column

# 创建一个空数据源
source = ColumnDataSource(data=dict(count=[]))

# 用于更新计数器的CustomJS回调函数
callback = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    var count = data['count'];
    if (count.length === 0) {
        count.push(0);
    }
    count[0] = cb_obj.value;
    source.change.emit();
""")

# 创建一个滑动条，当滑动条的值发生变化时，回调函数会被调用
slider = Slider(start=0, end=10, step=1, value=0, title="计数器", callback=callback)

# 创建一个显示计数器的文本框
text = Div(text="""
    <h1>计数器: <span id="count">0</span></h1>
""")

# 将滑动条和文本框放入一个列布局中
layout = column(slider, text)

show(layout)

在上面的例子中，我们创建了一个滑动条slider，当滑动条的值发生变化时，回调函数会通过cb_obj.value获取当前值。然后，我们将这个值存储到count列表中，并调用source.change.emit()来通知Bokeh更新数据源的状态。

使用CustomJS回调函数中的闭包

在前面的例子中，我们只能存储一个全局状态信息。如果我们需要存储多个状态信息，我们可以使用闭包的方式来实现。通过在回调函数外创建局部变量，并在回调函数内引用这些变量，我们可以方便地存储和检索多个状态信息。

import numpy as np
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure, show
from bokeh.layouts import column

# 创建一个空数据源
source = ColumnDataSource(data=dict(count=[]))

# 创建一个用于存储状态信息的字典
state = {}

# 用于更新计数器的CustomJS回调函数
callback = CustomJS(args=dict(source=source, state=state), code="""
    var data = source.data;
    var count = data['count'];
    if (!(state.hasOwnProperty('count'))) {
        state.count = 0;
    }
    state.count = cb_obj.value;
    count[0] = state.count;
    source.change.emit();
""")

# 创建一个滑动条，当滑动条的值发生变化时，回调函数会被调用
slider = Slider(start=0, end=10, step=1, value=0, title="计数器", callback=callback)

# 创建一个显示计数器的文本框
text = Div(text="""
    <h1>计数器: <span id="count">0</span></h1>
""")

# 将滑动条和文本框放入一个列布局中
layout = column(slider, text)

show(layout)

在上面的例子中，我们创建了一个字典state，用于存储多个状态信息。在回调函数内部，我们首先检查state是否具有count属性。如果没有，我们就为state.count赋予初始值0。然后，我们将cb_obj.value存储到state.count中，并将state.count赋值给count[0]，从而更新计数器的显示。通过使用闭包，我们可以方便地在回调函数内部存取和更新多个状态信息。

总结

在本文中，我们介绍了如何在Bokeh的回调函数中存储和检索状态信息。通过使用source作为数据源，我们可以方便地存储和更新状态信息。此外，我们还介绍了如何使用CustomJS回调函数中的全局变量和闭包来存储和检索状态信息。这些技巧可以帮助我们更好地处理交互行为，并灵活地控制可视化结果的显示。

在使用Bokeh时，我们可以根据实际需求选择合适的方法来存储和检索状态。如果只需要存储一个全局状态，可以直接使用source作为数据源，将状态信息存储到数据源的某个字段中。如果需要存储多个状态信息，可以使用回调函数中的全局变量或闭包来实现。

除了使用CustomJS回调函数，Bokeh还提供了其他一些用于存储和检索状态的方法。

使用JavaScript变量

在Bokeh中，我们可以使用JavaScript变量来存储状态信息。通过定义一个JavaScript变量，并在回调函数中更新和访问它，我们可以方便地存储和检索状态。

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

# 创建一个空数据源
source = ColumnDataSource(data=dict(count=[]))

# 创建一个用于存储状态信息的JavaScript变量
count = 0

# 用于更新计数器的CustomJS回调函数
callback = CustomJS(args=dict(source=source), code="""
    count += 1;
    source.data = {count: [count]};
""")

# 创建一个按钮，并将回调函数绑定到按钮的点击事件上
button = Button(label="增加计数器", callback=callback)

# 创建一个显示计数器的文本框
text = Div(text="""
    <h1>计数器: <span id="count">0</span></h1>
""")

# 将按钮和文本框放入一个列布局中
layout = column(button, text)

show(layout)

在上面的例子中，我们创建了一个JavaScript变量count，并初始化为0。在回调函数中，每次点击按钮时，count的值会加1，并将新的值赋给数据源的count字段。这样，每次点击按钮，计数器的值就会增加一次。

使用Bokeh Server

除了在前端使用JavaScript来存储和检索状态，我们还可以使用Bokeh Server来处理复杂的状态管理。Bokeh Server是一个用于构建交互式应用程序的Bokeh工具，它允许我们在后端使用Python来存储和检索状态。

from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, curdoc
from bokeh.layouts import column
from bokeh.models.widgets import Button, Div


# 创建一个空数据源
source = ColumnDataSource(data=dict(count=[]))

# 创建一个用于存储状态信息的变量
count = 0


def update_count():
    global count
    count += 1
    source.data = dict(count=[count])


# 创建一个按钮，并将回调函数绑定到按钮的点击事件上
button = Button(label="增加计数器")
button.on_click(update_count)

# 创建一个显示计数器的文本框
text = Div(text=f"<h1>计数器: {count}</h1>")

# 将按钮和文本框放入一个列布局中
layout = column(button, text)

# 更新文档
curdoc().add_root(layout)

在上面的例子中，我们使用了curdoc()函数来访问当前文档。在回调函数update_count()中，我们通过使用global关键字来声明变量count为全局变量，并在每次点击按钮时更新它的值。然后，我们将新的值赋给数据源，并通过调用curdoc().add_root(layout)来更新文档。这样，每次点击按钮，计数器的值就会增加一次。

使用Bokeh Server可以帮助我们更好地管理和处理复杂的状态信息，并实现更灵活的交互行为。

总结

本文介绍了在Bokeh中如何存储和检索状态信息。我们可以使用CustomJS回调函数、JavaScript变量以及Bokeh Server来实现状态管理。根据实际需求，选择合适的方法来存储和检索状态，可以帮助我们实现更灵活、交互丰富的数据可视化应用程序。无论是简单的计数器，还是复杂的状态管理，Bokeh提供了多种选择，满足不同场景的需求。