创建布局¶

Bokeh包括几个布局选项，用于安排绘图和小部件。它们可以安排多个组件来创建交互式仪表板或数据应用程序。

layout函数允许您构建一个由绘图和小部件组成的网格。可以根据需要将多行、多列或多个绘图网格嵌套在一起。此外，Bokeh布局支持多种“大小调整模式”。这些大小调整模式允许绘图和小部件根据浏览器窗口调整大小。

基本布局¶

柱布局¶

要以垂直方式显示绘图或小部件，请使用 column() 功能：

from bokeh.io import output_file, show
from bokeh.layouts import column
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create three plots
s1 = figure(plot_width=250, plot_height=250, background_fill_color="#fafafa")
s1.circle(x, y0, size=12, color="#53777a", alpha=0.8)

s2 = figure(plot_width=250, plot_height=250, background_fill_color="#fafafa")
s2.triangle(x, y1, size=12, color="#c02942", alpha=0.8)

s3 = figure(plot_width=250, plot_height=250, background_fill_color="#fafafa")
s3.square(x, y2, size=12, color="#d95b43", alpha=0.8)

# put the results in a column and show
show(column(s1, s2, s3))

行布局¶

要水平显示绘图，请使用 row() 功能。

from bokeh.io import output_file, show
from bokeh.layouts import row
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create three plots
s1 = figure(plot_width=250, plot_height=250, background_fill_color="#fafafa")
s1.circle(x, y0, size=12, color="#53777a", alpha=0.8)

s2 = figure(plot_width=250, plot_height=250, background_fill_color="#fafafa")
s2.triangle(x, y1, size=12, color="#c02942", alpha=0.8)

s3 = figure(plot_width=250, plot_height=250, background_fill_color="#fafafa")
s3.square(x, y2, size=12, color="#d95b43", alpha=0.8)

# put the results in a row and show
show(row(s1, s2, s3))

打印网格布局¶

这个 gridplot() 函数可用于在网格布局中排列Bokeh图。 gridplot() 同时将所有工具收集到一个工具栏中，当前激活的工具对于网格中的所有绘图都是相同的。可以通过路过在网格中留下“空白”空间 None 而不是绘图对象。

from bokeh.io import output_file, show
from bokeh.layouts import gridplot
from bokeh.plotting import figure

output_file("layout_grid.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create three plots
s1 = figure(background_fill_color="#fafafa")
s1.circle(x, y0, size=12, alpha=0.8, color="#53777a")

s2 = figure(background_fill_color="#fafafa")
s2.triangle(x, y1, size=12, alpha=0.8, color="#c02942")

s3 = figure(background_fill_color="#fafafa")
s3.square(x, y2, size=12, alpha=0.8, color="#d95b43")

# make a grid
grid = gridplot([[s1, s2], [None, s3]], plot_width=250, plot_height=250)

show(grid)

为了方便起见，您还可以传递绘图列表并指定网格中所需的列数。例如，

gridplot([s1, s2, s3], ncols=2)

另外，你可以进去 plot_width 和 plot_height 参数，这些参数将用于设置所有绘图的大小。

默认情况下， gridplot 将每个子绘图中的所有工具合并到一个附加到网格的工具栏中。要禁用此行为，可以设置选项 merge_tools 到 False .

from bokeh.io import output_file, show
from bokeh.layouts import gridplot
from bokeh.plotting import figure

output_file("layout_grid_convenient.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create three plots
s1 = figure(background_fill_color="#fafafa")
s1.circle(x, y0, size=12, alpha=0.8, color="#53777a")

s2 = figure(background_fill_color="#fafafa")
s2.triangle(x, y1, size=12, alpha=0.8, color="#c02942")

s3 = figure(background_fill_color="#fafafa")
s3.square(x, y2, size=12, alpha=0.8, color="#d95b43")

# make a grid
grid = gridplot([s1, s2, s3], ncols=2, plot_width=250, plot_height=250)

show(grid)

总网格布置¶

这个 layout() 函数可用于在网格中排列绘图和小部件，生成必要的 row() 和 column() 自动布局。这样可以快速创建布局：

sliders = column(amp, freq, phase, offset)

layout([
    [bollinger],
    [sliders, plot],
    [p1, p2, p3],
])

生成以下布局：

此绘图的完整代码可在 examples/howto/layouts/dashboard.py 在项目GitHub存储库中。

大小调整模式¶

模式¶

可布局的Bokeh对象可以使用以下大小调整模式单独配置：

"fixed": 组件没有响应。它将保留其原始的宽度和高度，而不考虑任何后续的浏览器窗口调整事件。
"stretch_width": 组件将相应地调整大小以拉伸到可用的宽度，而不保持任何宽高比。组件的高度取决于组件的类型，可以固定或适合组件的内容。
"stretch_height": 组件将相应地调整大小以拉伸到可用的高度，而不保持任何纵横比。组件的宽度取决于组件的类型，可以固定或适合组件的内容。
"stretch_both": 如果纵横比是独立的，那么纵横比会完全占据垂直部分的空间。
"scale_width": 组件将相应地调整大小以拉伸到可用的宽度，同时保持原始或提供的纵横比。
"scale_height": 组件将相应地调整大小以拉伸到可用高度，同时保持原始或提供的纵横比。
"scale_both": 组件将相应地调整到可用的宽度和高度，同时保持原始或提供的纵横比。

一般来说，两者中的一个或两个 width 和 height 可能还需要提供，具体取决于模式。（例如，对于 stretch_width 模式，所需的固定 height 必须提供）。

请注意，行和列等布局对象将把其配置的大小调整模式传递给其本身没有显式设置的任何子对象 sizing_mode 他们自己的。

单个对象¶

下面的示例允许您从下拉列表中选择大小调整模式，以查看单个绘图对不同模式的响应情况：

注解

如果封闭的DOM元素没有定义要填充的任何特定高度，则缩放或拉伸到高度的大小调整模式可能会收缩到最小大小。

多个对象¶

下面是一个更复杂（但相当典型）的具有不同大小调整模式的嵌套布局示例：

在上面的示例中，布局使用不同的大小调整模式嵌套不同的子组件：

# plot scales original aspect based on available width
plot = figure(..., sizing_mode="scale_width")

# sliders fill the space they are in
amp = Slider(..., sizing_mode="stretch_both")

# fixed sized for the entire column of sliders
widgets = column(..., sizing_mode="fixed", height=250, width=150)

# heading fills available width
heading = Div(..., height=80, sizing_mode="stretch_width")

# entire layout can fill the space it is in
layout = column(heading, row(widgets, plot), sizing_mode="stretch_both")

局限性¶

Bokeh布局系统不是一个完全通用的通用布局引擎。为了使通用用例和场景更易于表达，它故意牺牲一些功能。具有许多不同大小调整模式的嵌套布局可能会产生不理想的结果，无论是在性能方面，还是在视觉外观方面。对于这种情况，建议使用嵌入Bokeh内容以及您自己的自定义HTML模板，以便利用更复杂的CSS布局可能性。