python - Bokeh 数据表在 Row 和 Gridplot 中重叠

Question

我想在一行中显示两个数据表，但是当我这样做时，两个数据表没有间隔并且重叠。有谁知道我该如何防止这种情况？

在下面的示例代码中创建了两个数据表；但是，您无法读取 table1 的值列，因为 table2 直接位于它之上。

x = [1,2,3]
y1 = np.random.randn(3)
y2 = np.random.randn(3)

def create_data_table(x,y):
    source = ColumnDataSource(data=dict())
    source.data = {'index': x, 'value':y}
    columns = [TableColumn(field="index", title="index"),TableColumn(field="value", title="value")]
    data_table = DataTable(source=source, columns=columns)
    table = widgetbox(data_table)
    return table
table1 = create_data_table(x,y1)
table2 = create_data_table(x,y2)
show(row(table1,table2))

-------------------------------------------- 编辑 ------------------------------------------ ------

上面的例子没有足够的列/数据来充分说明问题。这是一个示例:

from bokeh.models import ColumnDataSource,TableColumn,DataTable
from bokeh.layouts import widgetbox,row
from bokeh.io import show
import random
x = [1,2,3]
def random_list():
    return [round(random.random(),3) for i in range(3)]

def create_data_table(x):
    source = ColumnDataSource(data=dict())
    source.data = {'index': x, 'value':random_list()}
    width=60
    columns = [TableColumn(field="index", title="index", width=width),
               TableColumn(field="value", title="value", width=width)]
    for i in range(4):
        source.data[str(i)] = random_list()
        columns.append(TableColumn(field=str(i), title=str(i), width=width))
    data_table = DataTable(source=source, columns=columns, width=width*6,row_headers=None)
    table = widgetbox(data_table)
    return table
table1 = create_data_table(x)
table2 = create_data_table(x)
show(row(table1,table2))

Answer 1

似乎每个 DataTable 都想使用整个绘图宽度。解决此问题的一种方法是为列和整个表格分配一些宽度值:

from bokeh.models import ColumnDataSource,TableColumn,DataTable
from bokeh.layouts import widgetbox,row
from bokeh.io import show
x = [1,2,3]
y1 = np.random.randn(3)
y2 = np.random.randn(3)

def create_data_table(x,y):
    source = ColumnDataSource(data=dict())
    source.data = {'index': x, 'value':y}
    columns = [TableColumn(field="index", title="index", width=50),
               TableColumn(field="value", title="value", width=200)]
    data_table = DataTable(source=source, columns=columns,width=250)
    table = widgetbox(data_table)
    return table
table1 = create_data_table(x,y1)
table2 = create_data_table(x,y2)
show(row(table1,table2))

更新

在 DataTable 中，您可能还想指定 height= 并且您可能不需要行标题，因此您可以使用 row_headers=False 也在 DataTable

中

更新 2

当添加更多列时，发现 widgetbox 中需要另一个宽度:与 DataTable 相同的宽度加上一些额外的分隔。在此示例中，我使用 50 进行额外分隔:

from bokeh.models import ColumnDataSource,TableColumn,DataTable
from bokeh.layouts import widgetbox,row
from bokeh.io import show
import random
x = [1,2,3]
def random_list():
    return [round(random.random(),3) for i in range(3)]

def create_data_table(x):
    source = ColumnDataSource(data=dict())
    source.data = {'index': x, 'value':random_list()}
    width=60
    columns = [TableColumn(field="index", title="index", width=width),
               TableColumn(field="value", title="value", width=width)]
    for i in range(4):
        source.data[str(i)] = random_list()
        columns.append(TableColumn(field=str(i), title=str(i), width=width))
    data_table = DataTable(source=source, columns=columns, width=width*6,row_headers=None)
    table = widgetbox(data_table,width=width*6+50)
    return table
table1 = create_data_table(x)
table2 = create_data_table(x)
show(row(table1,table2))