在Bokeh Table小部件中选择列(不是行)? [英] Select columns (not rows) in Bokeh Table Widget?

问题描述

我有一个散景表，该散景表链接到地块，并按预期工作.在表中选择一行将使绘图显示中所有未选择的行静音.

I have a bokeh table that is linked to a plot, and is working as intended. Selecting a row in the table mutes all the non-selected rows in the plot display.

但是，如果有人要选择一个列并隐藏图中的所有其他列怎么办?使用bokeh小部件可以做到这一点吗?还是需要为此功能编写一些自定义代码?我已经附加了用于在bokeh网站上生成窗口小部件表的代码，因为它是我能想到的(也是最快的)示例.

However, what if someone wants to select a column, and hide all other columns in the plot? Is this possible using a bokeh widget? Or does some custom code need to be written for this feature? I have attached to code used to produce the widget table on the bokeh website, as it is the most simple example I can think of (and quickest).

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))

推荐答案

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

Here is a code with a JS callback that allows you to know the selected row and column.

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 = [];行仅重置选定的索引，以便即使多次单击同一单元格也可以触发回调

The line cb_obj.selected['1d'].indices = []; just resets the selected indices so that the callback can trigger even if the same cell is clicked multiple times

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

You can then do what you want with the row/column index

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

If you need to you can also "transfer" the values back to python by updating a ColumnDatasource with the row and column values.

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

I use bokeh 0.12.10 so this may require some change with the latest version

经过0.12.16测试，仍然有效

tested with 0.12.16 and it still works

散景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))

这篇关于在Bokeh Table小部件中选择列(不是行)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！