是否在Bokeh表小部件中选择列(而不是行)？
是否在Bokeh表小部件中选择列(而不是行)？
提问于 2018-05-30 05:36:16
我有一个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))回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-30 07:58:51
下面是一个带有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))Stack Overflow用户
发布于 2018-05-30 07:51:02
从Bokeh 0.12.16开始，内置的DataTable不支持任何类型的列选择或单击事件。查看对底层SlickGrid实现的Grid Events的描述，可以看出onClick和onHeaderClick在较低级别上得到了支持。因此，可立即访问的选项将是带有自定义DataTable子类的Extending Bokeh。否则，您可以提交一个GitHub feature request issue来讨论以某种方式在内置表中公开这些事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50593326
复制相关文章
相似问题