要在下拉菜单更改时更新ColumnDataSource,可以使用Bokeh的CustomJS回调函数。下面是一个示例代码:
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Select
from bokeh.plotting import curdoc, figure
from bokeh.sampledata.iris import data
# 创建ColumnDataSource
source = ColumnDataSource(data)
# 创建一个下拉菜单
select = Select(title="选择花的种类:", value="setosa", options=["setosa", "versicolor", "virginica"])
# 创建一个图形
p = figure(plot_width=400, plot_height=400)
p.circle('sepal_length', 'sepal_width', source=source)
# 定义回调函数
callback = CustomJS(args=dict(source=source, select=select), code="""
// 获取下拉菜单的值
var selected_value = select.value;
// 更新ColumnDataSource的数据
source.data = data[selected_value];
""")
# 将回调函数与下拉菜单绑定
select.js_on_change('value', callback)
# 创建布局
layout = column(select, p)
# 添加布局到文档
curdoc().add_root(layout)
在这个示例中,我们首先创建了一个ColumnDataSource对象,将Bokeh示例数据集iris
中的数据作为源。然后,我们创建了一个下拉菜单select
,其中包含三个选项:setosa、versicolor和virginica。
然后,我们创建了一个图形p
,使用ColumnDataSource中的数据绘制散点图。
接下来,我们定义了一个CustomJS回调函数,该函数在下拉菜单的值更改时被调用。回调函数将获取下拉菜单的值,并根据该值更新ColumnDataSource的数据。这样,图形中显示的数据将根据下拉菜单的选择进行更新。
最后,我们将回调函数与下拉菜单的value
属性绑定,以便在下拉菜单更改时调用回调函数。
最后,我们将下拉菜单和图形添加到一个布局中,并将该布局添加到Bokeh文档中。