如何实现响应式仪表板布局？

Question

我正在使用一个仪表盘，该仪表盘的中央有一个响应式地图，该地图应占用大部分可用空间（stretch_both），并在两侧各有两个性能图，并具有固定宽度和拉伸高度。

在地图下方是一个滑块，应具有默认高度，但应拉伸到地图的宽度。最后，有一个按钮应该占据一个角部空间，并且大小必须固定，以免显得笨拙。

这是设计：

这是目录应用程序的最小不可用示例：

from bokeh.models import Button, Slider
from bokeh.plotting import figure, curdoc
from bokeh.tile_providers import CARTODBPOSITRON
from bokeh.layouts import column, row, Spacer

map = figure(x_range=(2479280, 2497644), y_range=(5882088, 5901322))
map.add_tile(CARTODBPOSITRON)

plot = figure(plot_width=100)
plot.circle(x=[1, 2, 3], y=[5, 5, 6])

button = Button(label='click me', width=100)
slider = Slider(start=0, end=100, value=0, step=1, title='value')

col1 = column(children=[plot, plot, button])
col2 = column(children=[map, slider], sizing_mode='stretch_both')
col3 = column(children=[plot, plot, Spacer()])
layout = row(children=[col1, col2, col3])

curdoc().add_root(layout)

这是我启动应用程序时得到的：

奇怪的是，四个图中的两个甚至都不可见，并且列的高度也不相同。

如何使布局看起来更像设计？

Answer 1

这些图未显示的原因是，通常，诸如Bokeh之类的Bokeh对象不能在布局中多次使用。对于这样的布局，最好使用grid函数：

from bokeh.models import Button, Slider
from bokeh.plotting import figure, curdoc
from bokeh.tile_providers import CARTODBPOSITRON
from bokeh.layouts import grid, column

map = figure(x_range=(2479280, 2497644), y_range=(5882088, 5901322), sizing_mode="stretch_both")
map.add_tile(CARTODBPOSITRON)

p1 = figure(plot_width=100)
p1.circle(x=[1, 2, 3], y=[5, 5, 6])

p2 = figure(plot_width=100)
p2.circle(x=[1, 2, 3], y=[5, 5, 6])

p3 = figure(plot_width=100)
p3.circle(x=[1, 2, 3], y=[5, 5, 6])

p4 = figure(plot_width=100)
p4.circle(x=[1, 2, 3], y=[5, 5, 6])

button = Button(label='click me', width=100, sizing_mode="fixed")
slider = Slider(start=0, end=100, value=0, step=1, title='value')

layout = grid([
    [column(p1, p2, sizing_mode="stretch_height"), map, column(p3, p4, sizing_mode="stretch_height")],
    [button, slider, None]
], sizing_mode='stretch_width')

curdoc().add_root(layout)

产生：