散景嵌套列的布局 [英] Bokeh nested column layout

问题描述

我想用2列在bokeh中创建嵌套布局.左列有2个图，一个在另一个上.右列有许多小部件，它们彼此堆叠在一起.我还希望所有内容都可以在浏览器窗口中自动调整:

I want to create a nested layout in bokeh with 2 columns. The left column has 2 plots, one above the other. The right column has a number of widgets, all stacked ontop of each other. I also want everything to autofit within the browser window:

我目前有这样的东西:

from bokeh.io import curdoc
from bokeh.layouts import row, column, widgetbox, layout
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider, TextInput, Button, CheckboxGroup, RadioButtonGroup
from bokeh.plotting import figure

# Set up data
source = ColumnDataSource(data=dict(time=[1,2,3], acc=[1,2,3]))
source_raw = ColumnDataSource(data=dict(time=[1,2,3], acc=[1,2,3]))

## Top
plot_orig = figure(tools="crosshair,pan,reset,save,wheel_zoom")
line_orig = plot_orig.line('time', 'acc', source=source, line_width=1, line_alpha=1)

## Bottom
plot_new = figure(tools="crosshair,pan,reset,save,wheel_zoom")
line_new = plot_new.line('time', 'acc', source=source, line_width=1, line_alpha=1)

# Set up widgets
sub = TextInput(value="1", title="Option #:")
trial = TextInput(value="1", title="Option #:")

signal_type = RadioButtonGroup(labels=["Raw", "Filtered", "Both"], active=1)
flip_signal_active = []
flip_signal_btn = CheckboxGroup(labels=["Flip signal"], active=flip_signal_active)
filter_order = Slider(title="Filter order", value=2, start=2, end=20, step=1)
filter_threshold = Slider(title="Filter threshold (Hz)", value=10, start=1, end=20, step=1)
reset_options_btn = Button(label="Set Default Options", button_type="danger")

value = Slider(title="Minimum value", value=0.6, start=0, end=1, step=0.01)
distance = Slider(title="Minimum distance", value=30, start=0, end=100, step=0.01)
deletions = TextInput(value="", title="Peaks to delete (comma separated):")
reset_params_btn = Button(label="Set Default Parameters", button_type="danger")
save_params_btn = Button(label="Save Parameters", button_type="success")

# Set up layouts and add to document   
sub_trial = widgetbox(sub, trial)
options = widgetbox(signal_type, flip_signal_btn, filter_order, filter_threshold, reset_options_btn)
parameters = widgetbox(value, distance, deletions, reset_params_btn, save_params_btn)

new_layout = layout([
  column([plot_orig, plot_new], sizing_mode='stretch_both'),
  column([sub_trial, options, parameters], sizing_mode='stretch_both'),
], sizing_mode='stretch_both')

curdoc().add_root(new_layout)

这使我很接近，因为正确的东西彼此叠放，并且调整大小似乎可行.但是，绘图和小部件堆栈应放在单独的列中:

That gets me close, as the correct things are stacked on top of each other and the resizing seems to work However, the plots and the widget stack should be in separate columns:

我尝试添加row来从小部件堆栈中拆分图，但是一切最终都变得微不足道:

I tried adding a row to split the plots from the widget stack, but everything ends up tiny:

new_layout = layout([row(
  column([plot_orig, plot_new], sizing_mode='stretch_both'),
  column([sub_trial, options, parameters], sizing_mode='stretch_both'),
)], sizing_mode='stretch_both')

推荐答案

我不知道是否有一种方法可以使下面的代码在调整大小模式下正常工作

I don't know if there is a way to make the code below work nicely with sizing modes

但是如果您负担不起使用它们，请设置数字plot_width和plot_height(例如700x275) 并使用gridplot布局:

But if you can afford not to use them, set the figures plot_width and plot_height (e.g. 700x275) and use a gridplot layout:

grid = gridplot([[column([plot_orig, plot_new]),widgetbox(sub_trial.children+options.children+parameters.children)]])

curdoc().add_root(grid)

这与column(row(column()，column()))相同，除了您可以选择是否要合并工具栏之外

This is the same as column(row(column(),column())) except that you can choose if you want merged toolbars or not

这篇关于散景嵌套列的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！