网格和布局

Bokeh 提供了多种布局选项用于图表和小部件。这些选项允许您安排多个组件，以创建交互式仪表板和数据应用程序。

布局函数允许您构建一个图表和小部件的网格。您可以在一个布局中拥有任意多的行、列或图表网格。Bokeh布局还允许使用多种大小调整选项或模式。这些模式允许图表和小部件调整大小以适应浏览器窗口。

内置布局

列布局

要垂直显示图表或小部件，请使用 column() 函数。

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

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(width=250, height=250, background_fill_color="#fafafa")
s1.scatter(x, y0, size=12, color="#53777a", alpha=0.8)

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

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

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

行布局

要水平显示图表或小部件，请使用row()函数。

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

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(width=250, height=250, background_fill_color="#fafafa")
s1.scatter(x, y0, size=12, color="#53777a", alpha=0.8)

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

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

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

图表网格布局

使用gridplot()函数将Bokeh图表排列成网格。此函数还将所有图表工具合并到一个工具栏中。网格中的每个图表都具有相同的活动工具。

你可以通过将None传递给网格单元格而不是绘图对象来留空网格单元格。

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

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.scatter(x, y0, size=12, alpha=0.8, color="#53777a")

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

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

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

show(grid)

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

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

你也可以传入width和height参数。 这些尺寸将应用于你所有的图表。

默认情况下，gridplot() 将所有子图工具合并到一个父网格工具栏中。要禁用此行为，请将 merge_tools 设置为 False。

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

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.scatter(x, y0, size=12, alpha=0.8, color="#53777a")

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

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

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

show(grid)

通用网格布局

你可以使用layout()函数将图表和小部件排列成网格。 这会自动生成适当的row()和column()布局，节省 你的时间。尝试以下代码以了解此函数的工作原理。

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

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

这将产生以下布局：

完整代码请参见 examples/basic/layouts/dashboard.py。

尺寸模式

模式

使用以下尺寸模式来配置Bokeh对象在布局中的行为：

"fixed"

无论浏览器窗口大小如何，组件都保持其宽度和高度。

"stretch_width"

组件会调整大小以填充可用宽度，但不保持任何宽高比。高度取决于组件类型，可能适合其内容或固定。

"stretch_height"

组件会调整大小以填充可用高度，但不保持任何宽高比。宽度取决于组件类型，可能适合其内容或固定。

"stretch_both"

组件会调整大小以填充可用的宽度和高度，但不保持任何宽高比。

"scale_width"

组件会调整大小以填充可用宽度，并保持原始或指定的宽高比。

"scale_height"

组件会调整大小以填充可用高度，并保持原始或指定的宽高比。

"scale_both"

组件会调整大小以填充可用的宽度和高度，并保持原始或指定的宽高比。

根据模式的不同，您可能还需要指定width和/或height。 例如，在使用stretch_width模式时，您必须指定一个固定的高度。

诸如 row() 和 column() 的组件会与所有没有自己明确尺寸模式的子元素共享它们的尺寸模式。

单个对象

下面的示例允许您从下拉菜单中选择一个尺寸模式，并查看单个图表如何响应不同的模式。

注意

如果封闭的DOM元素没有定义任何特定的高度来填充，按比例或拉伸到高度的尺寸模式可能会将您的绘图缩小到最小尺寸。

多个对象

下面是一个更复杂但相当典型的嵌套布局示例。

这里的布局包括具有不同尺寸模式的子组件，如下所示：

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

# slider fills all space available to it
amp = Slider(..., sizing_mode="stretch_both")

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

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

# entire layout fills all space available to it
layout = column(heading, row(widgets, plot), sizing_mode="stretch_both")

限制

Bokeh布局系统并非一个通用的布局引擎。它有意牺牲了一些功能，以使常见用例和场景的表达变得简单。具有许多不同尺寸模式的复杂布局可能会在性能和视觉外观方面产生不理想的结果。对于更复杂的设计，请使用网页中提供的方法以及您自己的自定义HTML模板。这将使您能够利用更复杂的CSS布局可能性。