Bokeh布局 | 互動式數據可視化庫Bokeh設計布局

Bokeh包含用於繪圖和小部件的多種布局選項，可以快速創建互動式數據應用程序。 布局的核心是三個核心對象是Row，Column和WidgetBox。 雖然可以直接使用這些模型，但建議使用布局函數row()，column()和widgetbox()。

為了使用布局獲得最佳結果，需要記住兩點：

所有項目必須具有相同的大小模式。

小工具應該放在小工具箱內。

Columns

要以垂直方式顯示繪圖或小部件，請使用column()函數：

from http://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]

# 創建一個圖表

s1 = figure(plot_width_=250, plot_height=250, title=None)

s1.circle(x, y0, size=10, color="navy", alpha=0.5)

# 創建另一個圖表

s2 = figure(plot_width_=250, plot_height=250, title=None)

s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# 再創建一個圖表

s3 = figure(plot_width_=250, plot_height=250, title=None)

s3.square(x, y2, size=10, color="olive", alpha=0.5)

# 垂直展示結果

show(column(s1, s2, s3))

Cows

要水平顯示圖形，請使用row()函數。

from http://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]

# 創建一個圖表

s1 = figure(plot_width_=250, plot_height=250, title=None)

s1.circle(x, y0, size=10, color="navy", alpha=0.5)

# 創建另一個圖表

s2 = figure(plot_width_=250, plot_height=250, title=None)

s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# 再創建一個圖表

s3 = figure(plot_width_=250, plot_height=250, title=None)

s3.square(x, y2, size=10, color="olive", alpha=0.5)

# 水平展示結果

show(row(s1, s2, s3))

Widgets

使用widgetbox()函數來布局一組小部件，相當於添加一個帶按鈕的工具箱。

from http://bokeh.io import output_file, show

from bokeh.layouts import widgetbox

from bokeh.models.widgets import Button, RadioButtonGroup, Select, Slider

output_file("layout_widgets.html")

# 添加一些小部件

slider = Slider(start=0, end=10, value=1, step=.1, title="Slider")

button_group = RadioButtonGroup(labels=["Option 1", "Option 2", "Option 3"], active=0)

select = Select(title="Option:", value="foo", options=["foo", "bar", "baz", "quux"])

button_1 = Button(label="Button 1")

button_2 = Button(label="Button 2")

# 展示結果

show(widgetbox(button_1, slider, button_group, select, button_2, width_=300))

推薦閱讀：