如何实现响应式仪表板布局? [英] How to achieve a responsive dashboard layout?

问题描述

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

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

这是设计:

这是目录应用程序的一个最小的不起作用示例:

来自bokeh.models的

 导入按钮，滑块来自bokeh.plotting导入图，curdoc从bokeh.tile_providers导入CARTODBPOSITRON从bokeh.layouts导入列，行，空格地图=图形(x_range =(2479280，2497644)，y_range =(5882088，5901322))map.add_tile(CARTODBPOSITRON)地块=数字(plot_width = 100)plot.circle(x = [1,2,3]，y = [5，5，6])按钮=按钮(标签=点击我"，宽度= 100)滑块=滑块(开始= 0，结束= 100，值= 0，步骤= 1，标题='值')col1 =列(子代= [图，图，按钮])col2 =列(子代= [地图，滑块]，sizing_mode ='stretch_both')col3 =列(子代= [图，图，Spacer()])布局=行(子代= [col1，col2，col3])curdoc().add_root(布局) 

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

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

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

解决方案

图未显示的原因是，通常，诸如Bokeh之类的Bokeh对象不能在布局中重复使用.对于这样的布局，最好使用 grid 函数:

来自bokeh.models的

 导入按钮，滑块来自bokeh.plotting导入图，curdoc从bokeh.tile_providers导入CARTODBPOSITRON从bokeh.layouts导入网格，列地图=图形(x_range =(2479280，2497644)，y_range =(5882088，5901322)，sizing_mode ="stretch_both")map.add_tile(CARTODBPOSITRON)p1 =图形(plot_width = 100)p1.circle(x = [1,2,3]，y = [5，5，6])p2 =图形(plot_width = 100)p2.circle(x = [1,2,3]，y = [5，5，6])p3 =图形(plot_width = 100)p3.circle(x = [1,2,3]，y = [5，5，6])p4 =图形(plot_width = 100)p4.circle(x = [1,2,3]，y = [5，5，6])按钮=按钮(标签=点击我"，宽度= 100，sizing_mode ="fixed")滑块=滑块(开始= 0，结束= 100，值= 0，步骤= 1，标题='值')布局=网格([[column(p1，p2，sizing_mode ="stretch_height")，地图，column(p3，p4，sizing_mode ="stretch_height")]，[按钮，滑块，无]]，sizing_mode ='stretch_width')curdoc().add_root(布局) 

产生:

I am working on a dashboard with a responsive map in the center that should take most available space (stretch_both) and two performance plots on either side with fixed width and a stretching height.

Below the map is a slider that should have default height but stretch to the width of the map. Finally there is a button that should take a corner space and be of fixed size to avoid looking awkward.

Here is the design:

Here is a minimal not working example of a directory app:

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)

And here is what I get when I start the app:

Strangely, two of the four plots are not even visible and the columns don't have the same height.

What can I do to get the layout to look more like the design?

解决方案

The reason the plots are not showing is that, in general, Bokeh objects such as plots cannot be re-used more than once in a layout. For a layout like this, the grid function is preferable:

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)

which yields:

这篇关于如何实现响应式仪表板布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！