从 Bokeh 中的数据表中单击选择的图表

Question

我从其他来源获取了以下代码 - 这不是我自己的代码。

该代码允许您在数据表中选择一个单元格，该单元格的“下载”数据将根据所选单元格的行绘制图表。

如何扩展此代码，以便如果我有多个变量（例如“下载”和“上传”）以及数据表中的更多列，我可以基于该单元格绘制数据图表（因此行和列是重要的）？或者，如何将选定单元格的列号定义为变量（与下面的 selected_row 可用于定义行号相同）？

from datetime import date
from random import randint
from bokeh.models import ColumnDataSource, Column
from bokeh.plotting import figure, curdoc
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, Div
import numpy as np

data = dict(dates = [date(2014, 3, i + 1) for i in range(10)],
            downloads = [randint(0, 100) for i in range(10)])
d_source = ColumnDataSource(data)

columns = [TableColumn(field = "dates", title = "Date", formatter = DateFormatter()),
           TableColumn(field = "downloads", title = "Downloads")]

data_table = DataTable(source = d_source, columns = columns, width = 400, height = 280)

def table_select_callback(attr, old, new):
    selected_row = new[0]
    download_count = data['downloads'][selected_row]
    chart_data = np.random.uniform(0, 100, size = download_count)
    p = figure(title = 'bla')
    r = p.line(x = range(len(chart_data)), y = chart_data)
    root_layout.children[1] = p

d_source.selected.on_change('indices', table_select_callback)

root_layout = Column(data_table, Div(text = 'Select Date'))
curdoc().add_root(root_layout)

Answer 1

这是最终的工作代码（从命令行使用bokeh serve --show app.py 运行）：

from datetime import date
from random import randint
from bokeh.models import ColumnDataSource, Column, TableColumn, DateFormatter, DataTable, CustomJS
from bokeh.plotting import figure, curdoc

source = ColumnDataSource(dict(dates = [date(2014, 3, i + 1) for i in range(10)], downloads = [randint(0, 100) for i in range(10)]))
columns = [TableColumn(field = "dates", title = "Date", formatter = DateFormatter()), TableColumn(field = "downloads", title = "Downloads")]
data_table = DataTable(source = source, columns = columns, width = 400, height = 280, editable = True, reorderable = False)
info_source = ColumnDataSource(dict(row = [], column = []))

source_code = """
var grid = document.getElementsByClassName('grid-canvas')[0].children;
var row, column = '';

for (var i = 0,max = grid.length; i < max; i++){
    if (grid[i].outerHTML.includes('active')){
        row = i;
        for (var j = 0, jmax = grid[i].children.length; j < jmax; j++)
            if(grid[i].children[j].outerHTML.includes('active')) {
                column = j; 
                source2.data = {row: [row], column: [column]};
            }
    }
}"""

callback = CustomJS(args = dict(source = source, source2 = info_source), code = source_code)
source.selected.js_on_change('indices', callback)

def py_callback(attr, old, new):
    source.selected.update(indices = [])
    print(info_source.data)

source.selected.on_change('indices', py_callback)
curdoc().add_root(Column(data_table))

Answer 2

我的建议是使用my another post，它使用 JS 回调来访问所选单元格的行和列。这必须是一个 JS 回调，因为它使用 HTML 元素来遍历。所以步骤如下：

1. 定义一个新的ColumnDataSource，它将包含被点击单元格的行号和列号

   info_source = ColumnDataSource(dict(row = [], column = []))

2. 使用来自this post 的JS 回调在这个新的table_info_source 中填写row 和column 值，如下所示：

callback=CustomJS(args=dict(source=d_source,source2=info_source),code=source_code)
source.selected.js_on_change('indices', callback)

1. 在 JS 回调中存储 row 和 column 索引，如下所示：

   source2.data = {row:[row],column:[column]};

2. 在 Python 回调中访问 info_source.data 信息以绘制绘图

   print (info_source.data)

两个回调都附加到同一个源，但通常首先执行 JS 回调，因此数据应该在 Python 回调中准时可用。有了单击单元格的行和列的索引，您应该能够检索所需的数据并绘制图表。