每个“散景”选项卡中作为子级的多个数据表的布局

时间:2019-02-14 14:57:03

标签: python bokeh

我想在每个Bokeh Tab(Bokeh面板)中都有几个表

但是,桌子水平地连接在一起,我找不到一种很好地显示它们的方法。我使用了一个哑巴的Div作为快速解决方案,但是它创建了太多的空间,甚至宽度为= 1的Div。我该如何实现?这是我的代码:

from bokeh.models.widgets import Panel, Tabs, TableColumn,DataTable, Div
import numpy as np
from bokeh.io import output_notebook, show
from bokeh.models import ColumnDataSource
from bokeh.layouts import row, column, layout

output_notebook()

columns = [
        TableColumn(field="A", title="A"),
        TableColumn(field="B", title="B"),
        TableColumn(field="C", title="C"),
        TableColumn(field="D", title="D"),]


data1 = {"A":np.random.randint(23, 89, 10), 
        "B": np.random.randint(23, 89, 10), 
        "C": np.random.randint(23, 89, 10), 
        "D": np.random.randint(23, 89, 10)}
source1 = ColumnDataSource(data1)
p1 = DataTable(source=source1, columns=columns, width=300, height=200,editable=True)


data2 = {"A":np.random.randint(23, 89, 10), 
        "B": np.random.randint(23, 89, 10), 
        "C": np.random.randint(23, 89, 10), 
        "D": np.random.randint(23, 89, 10)}
source2 = ColumnDataSource(data2)      
p2 = DataTable(source=source2, columns=columns, width=300, height=200,editable=True)



data3 = {"A":np.random.randint(23, 89, 10), 
        "B": np.random.randint(23, 89, 10), 
        "C": np.random.randint(23, 89, 10), 
        "D": np.random.randint(23, 89, 10)}
source3 = ColumnDataSource(data3)       
p3 = DataTable(source=source3, columns=columns, width=300, height=200,editable=True)


dumbdiv = Div(text=""" """,
width=1, height=20)


l1 = layout([[p1, p2], [p3]], sizing_mode='fixed')
# l1 = layout([[p1, dumbdiv, p2]], sizing_mode='fixed')


tab1 = Panel(child=l1, title="Three Tables")
tabs = Tabs(tabs=[tab1],sizing_mode='scale_width')
show(tabs)

结果如下:(第一张表的滚动条未显示;我希望第一行的表之间有一些空间)

enter image description here

2 个答案:

答案 0 :(得分:1)

widthheightDiv的可选参数。如果仅创建没有这些参数的dumbdiv对象,则会在p1和p2之间插入一个div,而没有任何特定的widthheight

dumbdiv = Div()
l1 = layout([[p1, dumbdiv, p2], [p3]], sizing_mode='fixed')

因此,现在您应该在p1和p2之间看到足够的空间:

enter image description here

答案 1 :(得分:0)

Div()的问题是两个数据表之间可能存在相当大的差距,远远超出了需要。我认为使用Spacer看起来更好

row2 = row(p1, Spacer(width=600, height=10), p2)
l1 = layout([row2], sizing_mode='fixed')