レイアウトを作成する¶

Bokehは、描画および小さな部品を配列するためのいくつかのレイアウトオプションを含む。これらは、対話型インストルメントパネルまたはデータアプリケーションを作成するために複数のコンポーネントを配置することを可能にする。

レイアウト関数により、描画とウィジェットのメッシュを構築することができます。必要に応じて任意の複数行、複数列、またはマルチグリッドの描画を入れ子にすることができます。また、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))

ブロックのグリッド配置¶

♪the 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)

通常のグリッド配置¶

♪the 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": コンポーネントは、元のアスペクト比または提供されたアスペクト比を維持しながら、応答してサイズを利用可能な幅および高さに調整する。

一般に、以下の2項のうちの1つまたは2つ 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コンテンツを埋め込むより複雑なCSSレイアウト可能性を利用するために、あなた自身のHTMLテンプレートをカスタマイズします。