首页 > 解决方案 > Python Bokeh 选项卡布局 tabs_location 更新

问题描述

我正在创建一个散景仪表板,试图在布局中合并选项卡。我需要将选项卡位置移动到面板的右侧(最好是右下角),但我遇到了这个错误:

AttributeError:意外的属性“tabs_location”到选项卡

根据源代码,Tabs 类确实具有此属性:

    tabs_location = Enum(Location, default="above", help="""
The location of the buttons that activate tabs.
""")

该错误来自以下 MWE 中的 Tabs() 调用。如果忽略这一点,则代码可以工作,但图形和小部件的定位会因单个图形放置而受到干扰。

通过替换可以看到我正在寻找的基本布局:

row3a = row(tabs,wb1)

和:

row3a = row(t1,wb1)

MWE:

from bokeh.plotting import figure, show
from bokeh.layouts import row, column, widgetbox
from bokeh.models.widgets import Button, Select, TextInput, Panel, Tabs
from bokeh.models.widgets import Paragraph

t1 = figure(plot_width=500, plot_height=420, title=None)
t1.toolbar_location='right'
t1.toolbar.logo=None
tab1 = Panel(child=t1,title="TPF")

t2 = figure(plot_width=500, plot_height=420, title=None)
t2.toolbar_location='right'
t2.toolbar.logo=None
tab2 = Panel(child=t2,title="Prob")

tabs = Tabs(tabs=[ tab1, tab2 ],tabs_location='right')

select3a1 = Select(title="Var:", value="No", options=["No","Yes"])

category_options = {'No':[""],'Yes':["V1","V2"]}
select3a2 = Select(title="Category:", value="", options=category_options[select3a1.value])

tar_info = Paragraph(text = f'Tar: ')
mem_info = Paragraph(text = f'gm: ')

wb1 = widgetbox(tar_info,mem_info,select3a1,select3a2)

row3a = row(tabs,wb1)

menu_db_id = [("db1", "id1"), ("db2", "id2")]

drop_db_id = Select(title="Database",options=["db2","db1"],width=100)
id_inp = TextInput(title="ID",width=200)
s_butt = Button(label = 'Search',width=50,height=50)

s_sel = Paragraph(text=f'Selected: ',width=100)

row3b = row(widgetbox(drop_db_id,width=120),widgetbox(id_inp,width=250),widgetbox(s_butt,width=100),widgetbox(s_sel))

f3 = figure(plot_width=800, plot_height=200, title=None)
f3.toolbar.logo=None

col_targ = column(row3b,row3a,f3)

f4 = figure(plot_width=700, plot_height=700, title=None)
f4.toolbar_location='left'
f4.toolbar.logo=None

row3 = row(f4,col_targ)

show(row3)

标签: python-3.xtabsbokeh

解决方案


对于 Bokeh v1.1.0,此代码将起作用:

from bokeh.plotting import save, figure
from bokeh.models import Paragraph, Panel, Tabs, Column
from bokeh.util.browser import view

template = """
{% block postamble %}
<style>
.bk-root .bk-tabs-header .bk-tab {
    background-color: cyan;
    width: 100px;
    color: red;
    font-style: italic;

    position: relative;
    left: 400px; 
}

.bk-root .bk-tabs-header .bk-tab.bk-active{
    background-color: yellow;
    color: blue;
    font-style: normal;
    font-weight: bold;

    position: relative;
    left: 400px;
}

.bk-root .bk-tabs-header .bk-tab:hover{
    background-color: yellow

    position: relative;
    left: 400px;
}

</style>
{% endblock %}
"""

p = Paragraph(text = "Another tab", width = 600)

plot = figure()
plot.line(x = [1, 2], y = [3, 4])
tabs = [Panel(title = 'Tab1', child = plot)]
tabs.append(Panel(title = 'Tab2', child = p))

save(Column(Tabs(tabs = tabs, width = 600, tabs_location = 'below')), template = template)
view("tabs_styles_demo.html")

结果:

在此处输入图像描述


推荐阅读