python - 在 Bokeh Table Widget 中选择列(而不是行)？

Question

我有一个链接到绘图的 Bokeh 表，并且正在按预期工作。选择表中的一行将使绘图显示中所有未选定的行静音。

但是，如果有人想要选择一列，并隐藏图中的所有其他列，该怎么办？使用 Bokeh 小部件可以实现这一点吗？或者是否需要为此功能编写一些自定义代码？我已附加用于在 Bokeh 网站上生成小部件表的代码，因为这是我能想到的最简单的示例(也是最快的)。

from datetime import date
from random import randint

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn

output_file("data_table.html")

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

columns = [
        TableColumn(field="dates", title="Date", formatter=DateFormatter()),
        TableColumn(field="downloads", title="Downloads"),
    ]
data_table = DataTable(source=source, columns=columns, width=400, height=280)

show(widgetbox(data_table))

Answer 1

这是一段带有 JS 回调的代码，可以让您知道所选的行和列。

from bokeh.io import show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import DataTable,TableColumn

column_list = ['col1','col2','col3']

source = ColumnDataSource(data = {key:range(10) for key in column_list})

columns = [TableColumn(field=col, title=col) for col in column_list]

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

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

var row = '';
var col = '';

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')){col=j}
        }
    }
}

console.log('row',row);
console.log('col',col);

cb_obj.selected['1d'].indices = [];
"""

source.callback = CustomJS(code= source_code)

show(widgetbox(data_table))

行cb_obj.selected['1d'].indices = [];只是重置选定的索引，以便即使多次单击同一单元格也可以触发回调

然后您可以使用行/列索引执行您想要的操作

如果需要，您还可以通过使用行和列值更新 ColumnDatasource 将值“传输”回 python。

我使用 bokeh 0.12.10，因此这可能需要对最新版本进行一些更改

编辑:使用 0.12.16 进行测试，它仍然有效

编辑: Bokeh 1.1.0 更新

from bokeh.io import show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import DataTable,TableColumn

column_list = ['col1','col2','col3']

source = ColumnDataSource(data = {key:range(20) for key in column_list})

columns = [TableColumn(field=col, title=col) for col in column_list]

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

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

var active_row = grid.querySelectorAll('.active')[0];

if (active_row!=undefined){

    var active_row_ID = Number(active_row.children[0].innerText);

    for (var i=1, imax=active_row.children.length; i<imax; i++){
        if (active_row.children[i].className.includes('active')){
            var active_col_ID = i-1;
        }
    }

    console.log('row',active_row_ID);
    console.log('col',active_col_ID);

    var active_cells = grid.querySelectorAll('.active');
    for (i=0, imax=active_cells.length;i<imax;i++){
        active_cells[i].classList.remove('active');
    }

    cb_obj.indices = [];
}
"""

source.selected.js_on_change('indices', CustomJS(args={'source':source},code= source_code) )

show(widgetbox(data_table))