散景: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

我找到了一种基于bokeh >0.13 嵌入式系统的解决方法，您可以在多个 html 元素中以及引导网格系统中嵌入 Bokeh 应用程序的各个组件。

\n\n

使用引导程序折叠来模拟选项卡系统。

\n\n

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

\n\n

索引.html

\n\n

\r\n

\r\n

{% extends base %}\r\n\r\n<!-- goes in head -->\r\n{% block preamble %}\r\n\r\n<!-- Required meta tags -->\r\n<meta charset="utf-8">\r\n<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">\r\n\r\n<!-- Bootstrap CSS -->\r\n<link rel="stylesheet" href="example_code/static/css/bootstrap.min.css">\r\n{% endblock %}\r\n\r\n<!-- goes in body -->\r\n{% block contents %}\r\n<div class="container-fluid">\r\n    <div class="row">\r\n\r\n        <div class="col-1">\r\n            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1"\r\n                    aria-expanded="false" aria-controls="collapse1">\r\n                collapseBtn\r\n            </button>\r\n            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse2"\r\n                    aria-expanded="false" aria-controls="collapse2">\r\n                collapsegraph\r\n            </button>\r\n        </div>\r\n\r\n        <div class="col" id="main_topic">\r\n      \r\n            <div class="container-fluid collapse" id="collapse1" data-parent="#main_topic">\r\n                <div class="row">\r\n                    <div class="col">\r\n                        {{ embed(roots.bidule) }}\r\n                    </div>\r\n                    <div class="col-2">\r\n                        <p>un peu de texte html</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n            <div class="container-fluid contenu collapse" id="collapse2" data-parent="#main_topic">\r\n                <div class="row">\r\n                    <div class="col">\r\n                        {{ embed(roots.bloc1) }}\r\n                    </div>\r\n\r\n                    <div class="droite col-2">\r\n                        {{ embed(roots.bloc2) }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<script src="example_code/static/js/jquery-3.3.1.slim.min.js"></script>\r\n<script src="example_code/static/js/popper.min.js"></script>\r\n<script src="example_code/static/js/bootstrap.min.js"></script>\r\n{% endblock %}

\r\n

\r\n

\r\n

\n\n

主要.py

\n\n

import pandas as pd\n\nfrom bokeh.plotting import curdoc, figure\nfrom bokeh.models import ColumnDataSource\nfrom bokeh.models.widgets import Button\nfrom bokeh.layouts import row, column, widgetbox, layout\n\n# importer un fichier csv et les pr\xc3\xa9parer pour bokeh\nfile = "data/data.txt"\ndf = pd.read_csv(file, sep=\'\\t\', header=2, index_col =0, decimal=",")\nsource2 = ColumnDataSource(df)\n\n# BLOC 1\np = figure(output_backend = "webgl",  sizing_mode="stretch_both", name="bloc1")\np.line(x=\'Datation\', y=\'Temp_enceinte\', source = source2, color="blue")\n\n# BLOC 2\nbouton1 = Button(label="Mon beau bouton")\nbouton2 = Button(label="Roi")\nbouton3 = Button(label="des for\xc3\xaats")\no = widgetbox(bouton1, bouton2, bouton3, sizing_mode = "stretch_both", name="bloc2")\n\n# BIDULE\nq = figure(output_backend = "webgl",  sizing_mode="stretch_both")\nq.line(x=\'Datation\', y=\'Temp_enceinte\', source = source2, color="blue")\nr = figure(output_backend = "webgl",  sizing_mode="stretch_both")\nr.line(x=\'Datation\', y=\'Temp_enceinte\', source = source2, color="blue")\nc = row(q, r, sizing_mode="stretch_both", name="bidule")\n\n###########\n# export\n###########\n\ncurdoc().add_root(p)\ncurdoc().add_root(o)\ncurdoc().add_root(c)\n

\n