散景： sizing_mode="stretch_both" 在选项卡中不起作用

Question

我想要一个“全屏”散景应用程序，其中包含一个绘图区域和一个使用选项卡的控制区域。

from bokeh.plotting import figure
from bokeh.io import show
from bokeh.layouts import row, widgetbox
from bokeh.models.widgets import Button, Panel, Tabs

tools_to_show = 'hover, box_zoom, save, reset, pan'
p = figure(tools=tools_to_show, output_backend = "webgl")
p.line([1, 2, 3, 4], [9, 5, 7, 6])

b_valid = Button(label="valid")
b_select = Button(label="select")
wbox1 = widgetbox(b_valid)
wbox2 = widgetbox(b_select)
tab1 = Panel(title="tab valid", child=wbox1)
tab2 = Panel(title="tab select", child=wbox2)
tabs = Tabs(tabs=[tab1, tab2])

my_plot = row(p, tabs, sizing_mode="stretch_both")

show(my_plot)

尽管使用了 sizing_mode="stretch_both"，但标签中的小部件并未使用所有可用空间。

我试图将 sizing_mode="stretch_both" 放在面板中，在小部件框中，但没有成功。 我也尝试使用 sizing_mode="scale_width"，但徒劳无功。

有什么想法吗？

Answer 1

我发现了一个基于 embedded system of bokeh >0.13 的解决方法，您可以在其中将 Bokeh 应用程序的各个组件嵌入到多个 html 元素中，以及在 bootstrap grid system 上。

使用bootstrap collapse 功能和按钮模拟选项卡系统。

一些代码来说明，用作散景服务器应用程序（bokeh serve --show my_folder）：

index.html

{% extends base %}

<!-- goes in head -->
{% block preamble %}

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="example_code/static/css/bootstrap.min.css">
{% endblock %}

<!-- goes in body -->
{% block contents %}
<div class="container-fluid">
    <div class="row">

        <div class="col-1">
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1"
                    aria-expanded="false" aria-controls="collapse1">
                collapseBtn
            </button>
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse2"
                    aria-expanded="false" aria-controls="collapse2">
                collapsegraph
            </button>
        </div>

        <div class="col" id="main_topic">
      
            <div class="container-fluid collapse" id="collapse1" data-parent="#main_topic">
                <div class="row">
                    <div class="col">
                        {{ embed(roots.bidule) }}
                    </div>
                    <div class="col-2">
                        <p>un peu de texte html</p>
                    </div>
                </div>
            </div>
            
            <div class="container-fluid contenu collapse" id="collapse2" data-parent="#main_topic">
                <div class="row">
                    <div class="col">
                        {{ embed(roots.bloc1) }}
                    </div>

                    <div class="droite col-2">
                        {{ embed(roots.bloc2) }}
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<script src="example_code/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="example_code/static/js/popper.min.js"></script>
<script src="example_code/static/js/bootstrap.min.js"></script>
{% endblock %}

main.py

import pandas as pd

from bokeh.plotting import curdoc, figure
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Button
from bokeh.layouts import row, column, widgetbox, layout

# importer un fichier csv et les préparer pour bokeh
file = "data/data.txt"
df = pd.read_csv(file, sep='\t', header=2, index_col =0, decimal=",")
source2 = ColumnDataSource(df)

# BLOC 1
p = figure(output_backend = "webgl",  sizing_mode="stretch_both", name="bloc1")
p.line(x='Datation', y='Temp_enceinte', source = source2, color="blue")

# BLOC 2
bouton1 = Button(label="Mon beau bouton")
bouton2 = Button(label="Roi")
bouton3 = Button(label="des forêts")
o = widgetbox(bouton1, bouton2, bouton3, sizing_mode = "stretch_both", name="bloc2")

# BIDULE
q = figure(output_backend = "webgl",  sizing_mode="stretch_both")
q.line(x='Datation', y='Temp_enceinte', source = source2, color="blue")
r = figure(output_backend = "webgl",  sizing_mode="stretch_both")
r.line(x='Datation', y='Temp_enceinte', source = source2, color="blue")
c = row(q, r, sizing_mode="stretch_both", name="bidule")

###########
# export
###########

curdoc().add_root(p)
curdoc().add_root(o)
curdoc().add_root(c)