Bokeh DataTables在Row和Gridplot中重叠

Question

我想在一行中显示两个DataTable，但是当我这样做时，两个DataTable不会分开并重叠。有谁知道我怎么能阻止这个？

在下面的示例代码中，创建了两个数据表;但是，您无法读取table1的value列，因为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))