Фон:
У меня есть сервер bokeh, показывающий график рассеяния и таблицу данных. Когда пользователь щелкает точку данных на графике, DataTable обновляется данными, связанными с этой точкой. Выше DataTable у меня есть Div с заголовком для таблицы.
У меня есть ColumnDataSource.selected.on_change
с обработчиком событий на источнике для точечной диаграммы и я могу обновить DataTable.
Проблема:
Я хотел бы обновить Div с выбранной точкой, чтобы показать, к чему относятся данные в таблице, но не может.
Ниже приведен пример того, что Я пытаюсь сделать:
import pandas as pd
from bokeh.io import curdoc
from bokeh.models import ColumnDataSource, Div
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.layouts import gridplot
from bokeh.plotting import figure
df = pd.DataFrame({'a':[1, 2, 3, 4, 5], 'b':[10, 20, 30, 40, 50]})
src = ColumnDataSource(df)
p = figure(tools='tap')
p.circle(x='a', y='b', source=src)
df1 = pd.DataFrame({'a':[], 'b':[]})
srcTab = ColumnDataSource(df1)
table_cols = [TableColumn(field='a', title='a'),
TableColumn(field='b', title='b')]
dataTable = DataTable(source=srcTab, columns=table_cols)
# This is the div in question
div = Div(text="<b>Select a data point</b>")
grid = gridplot([[None, div], [p, dataTable]])
def callback(attr, old, new):
selected_index = src.selected.indices[0] + 1
newDf1 = df.iloc[0:selected_index,:]
newSrcTab = ColumnDataSource(newDf1)
srcTab.data.update(newSrcTab.data)
# Set div text to f"Point selected: {selected_index}"
src.selected.on_change('indices', callback)
curdoc().add_root(grid)
Требования:
боке, pandas
Сервер может быть запущен с bokeh serve --show [folder with the above code in it]/
Примечания:
- Я знаю, что обработчик событий выдает много ошибок. Это просто пример кода, а не мой фактический вариант использования (в котором есть обработка ошибок).
- Я бы предпочел сделать все это в python, но если бы существовало простое решение с пользовательским обратным вызовом JS, которое бы будь великим.