- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我想要一个“全屏” Bokeh 应用程序,其中包含一个绘图区域和一个使用选项卡的控制区域。
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",但没有用。
有什么想法吗?
最佳答案
我找到了一个基于 embedded system of bokeh >0.13 的解决方法您可以在其中将 Bokeh 应用程序的各个组件嵌入到多个 html 元素中,并在 bootstrap grid system 上.
Tab 系统是使用 bootstrap collapse 模拟的功能和按钮。
用于说明的一些代码,用作 Bokeh 服务器应用程序( Bokeh 服务 --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 %}
主要.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)
关于python - Bokeh : sizing_mode ="stretch_both" is not working in tabs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47732408/
我在看 Tabs UI 的选项。默认行为是它们水平堆叠。有没有办法改变它? 我想堆叠Tabs垂直。它将节省大量的 UI“不动产”,尤其是在移动应用程序 UI 中。 最佳答案 尝试这个: Tabs ta
问题:在 Zsh 中使用 TAB 向后导航,类似于在 Firefox 中 Shift-TAB Shift-TAB 应该执行的操作示例 我在终端中运行以下代码 ls 我明白了 A B C D E F
有很多人想知道如何完成制表符。这不是这些问题之一。问题是如何将 tab 键分配给 tab 补全? alt-tab/esc-tab 很痛苦。在面板禁用模式选项卡完成工作,这让我暂时...但我仍然希望面板
所以我有一个带有 3 个屏幕的 TabNavigator。 import React from 'react'; import {TabNavigator,createBottomTabNavigat
我想触发一个事件,例如当我在文本框中按 Tab 键时显示警报消息。 $("input").blur(function (e) { if (e.which == 9) alert(
我将这段代码设置为创建一个选项卡式菜单,它显示为一个选项卡式菜单,但当我加载网站时,选项卡在单击时不会改变。在“检查元素”中它说 $( "#tabs").tabs();不是函数。我不知道下一步要解决这
表单中有多个输入字段的示例,因为有一些字段在此之前会自动填充,如果我按 Tab 键,那么它应该跳过该自动填充的输入字段并应转到空白输入字段 我尝试过,但是当我开始在空白输入中写入时会发生什么,它也会自
我想写一个小的 chrome 扩展程序,它应该从网页 A(当前网页)获取信息,将选项卡更新到网页 B,然后将代码注入(inject)网页 B。不幸的是,以下代码正在将网页更新到 B 但注入(injec
如果当前事件选项卡中的表单很脏,我试图阻止 mat-tab 的选项卡更改。 但是我找不到拦截选项卡更改事件的方法。 // Tab 0 Content // Tab
我已从 MacOS Mojave 上的默认终端切换到 iterm2 .我有一个关于从当前选项卡打开新选项卡的问题。 确实,我希望与上一个当前选项卡处于同一路径。 为此,我执行了经典程序,即转到 ite
我在我的网站的两页上有此代码,但在一页上该功能不起作用。 Firebug 向我显示“$(...).tabs 不是函数”。我不明白为什么,谁能告诉我什么是错的? 这是有效的: http://www.in
我需要可靠的方法来为 Windows 和 XP 创建 %tab% (包含一个制表符)。 SET TAB=" " 应该适用于 Windows 7(未测试)但不适用于 Win XP(已测试)。 这个 fo
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI,它有第一层选项卡,然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI,它有第一层选项卡,然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
我在使用 chrome.tabs.create 方法打开多个选项卡时遇到问题。我正在尝试使用 chrome.tabs.create 循环打开大约 9 个选项卡,但打开的选项卡数量仅限于 4 个。看起来
我正在使用 Material ui 的标签,并且能够对标签的指示器进行更改。但是,我正在尝试使用样式将每个选项卡的指示器宽度减小到某个固定宽度。但似乎指标以一些计算值定位在左侧,并且给它一个宽度不会使
我在 OS X 终端中使用 emacs 24.3,并且遇到了一些奇怪的事情。 在 markdown-mode.el 中,tab 键通过 (define-key map (kbd "") 'markdo
在 Chrome 开发者工具上 Uncaught (in promise) Error: There is no clipping info for given tab at E._handleRes
在vim中,我想将:tabnew缩短为:tn,将:tabp缩短为:th,将:tabn缩短为:tl在我的.vimrc中。知道我将如何重新映射这样的命令吗? 最佳答案 使用cabbrev: ca tn t
我读过几个主题,讨论 IE 中的地址栏在使用 TAB 时基本上是第一个获得焦点的主题(MSDN 自己的文档讨论了这一点)。 然而,我也见过一些情况,但情况并不总是如此...... 我有一个母版页,内容
我是一名优秀的程序员,十分优秀!