Bokeh中图形与组件的布局简介 | Bokeh 小册子

Bokeh 系列文章传送门：

Table of Contents

• 1  图形的布局

• 1.1  column

• 1.2  row

• 1.3  gridplot

• 2  组件的布局

• 3  图形和组件混合布局

1 图形的布局

图形（plot）的布局可以通过 column() 、 row() 和 gridplot() 方法来实现，其中：

1、 column() 方法是将所有图形(plots)在一列中分布；

2、 row() 方法是将所有图形(plots)在一行中分布；

3、 gridplot() 方法，可以按需求进行行列分布。

1.1 column

把所有图形放在一列中分布，其基本用法为 column([plot_1, plot_2, ……, plot_n])

1. from bokeh.io import output_notebook, show

2. from bokeh.layouts import column, row, gridplot

3. from bokeh.plotting import figure

4. import numpy as np

5. output_notebook()

准备基础数据和图形

1. np.random.seed(15)

2. x=np.random.randint(1,20,size=6)

3. y=np.random.randint(20,50,size=6)

4. p1 = figure(title='circle',plot_width=300,plot_height=300)

5. p1.circle(x,y,size=20, color='#0071c1')

6. p2 = figure(title='circle_cross',plot_width=300,plot_height=300)

7. p2.circle_cross(x,y,size=20, color='#0071c1',fill_alpha=0.2, line_width=2)

8. p3 = figure(title='circle_x',plot_width=300,plot_height=300)

9. p3.circle_x(x,y,size=20, color='#0071c1',fill_alpha=0.2, line_width=2)

10. p4 = figure(title='cross',plot_width=300,plot_height=300)

11. p4.cross(x,y,size=20, color='#0071c1', line_width=2)

将图形按列进行布局

1. column_layout = column([p1, p2, p3])

2. show(column_layout)

如图1所示：

1.2 row

把所有图形按行分布，其基本用法为 row([plot_1, plot_2, ……, plot_n])

1. row_layout = row(p1,p2,p3)

2. show(row_layout)

如图2所示：

1.3 gridplot

使用 gridplot 来进行个性化布局， gridplot 的参数如下：

gridplot(*args, **kwargs)

Create a grid of plots rendered on separate canvases. gridplot builds a single toolbar for all the plots in the grid. gridplot is designed to layout a set of plots. For general grid layout, use the layout() function.

Parameters:

• children (list of lists of Plot) – An array of plots to display in a grid, given as a list of lists of Plot objects. To leave a position in the grid empty, pass None for that position in the children list. OR list of Plot if called with ncols. OR an instance of GridSpec.

• sizingmode ("fixed", "stretchboth", "scalewidth", "scaleheight", "scaleboth") – How will the items in the layout resize to fill the available space. Default is "fixed". For more information on the different modes see sizingmode description on LayoutDOM.

• toolbar_location (above, below, left, right) – Where the toolbar will be located, with respect to the grid. Default is above. If set to None, no toolbar will be attached to the grid.

• ncols (int, optional) – Specify the number of columns you would like in your grid. You must only pass an un-nested list of plots (as opposed to a list of lists of plots) when using ncols.

• plot_width (int, optional) – The width you would like all your plots to be

• plot_height (int, optional) – The height you would like all your plots to be.

• toolbar_options (dict, optional) – A dictionary of options that will be used to construct the grid’s toolbar (an instance of ToolbarBox). If none is supplied, ToolbarBox’s defaults will be used.

• merge_tools (True, False) – Combine tools from all child plots into a single toolbar.

可以在 gridplot() 方法中，以列表的形式将 plots 分组按行列的形式表示出来，如果要预留一个空置的位置，可以用 “None” 来表示。

1. grid1=gridplot([p1,p2],[p3,])

2. show(grid1)

如图3所示：

1. grid2=gridplot([p1,p2],[None,p3])

2. show(grid2)

如图4所示：

在 gridplot() 方法中，还可以引入参数 ncols 来控制显示的列数，这里所有的 plots 放在一个列表中即可。

P.S. 官方文档中，提到有 “ncols” 参数时，不能同时使用 “None”，但我尝试了一下，是可以同时使用 “None” 的。 有兴趣的小伙伴也可以试试。

官方的原文如下：

You cannot use None with the ncols argument. It must only be a list of Plot objects at once.

1. grid3=gridplot([p1,p2,p4],ncols=2, plot_width=300,plot_height=300)

2. show(grid3)

如图5所示：

1. grid4=gridplot([p1,p2,None,p4],ncols=2, plot_width=300,plot_height=300)

2. show(grid4)

如图6所示：

2 组件的布局

bokeh 中，组件（widgets）包括 按钮（button），选项（Group），滑动块（slider）等等；组件的布局通过 widgerbox() 方法来实现

1. from bokeh.layouts import widgetbox

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

3. from bokeh.models.widgets import Dropdown, Toggle

4. # 创建一些组件

5. slider = Slider(start=0, end=20, value=1, step=0.5, title="Slider")

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

7. select = Select(title="Option:", value="Lemon", options=["Python数据之道", "Python", "Java", "PHP"])

8. button_1 = Button(label="Button 1")

9. button_2 = Button(label="Button 2")

10. menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3", "item_3")]

11. dropdown = Dropdown(label="Dropdown button", button_type="warning", menu=menu)

12. # put the results in a row

13. show(widgetbox(button_1, slider,dropdown,

14.               button_group, select,

15.               button_2, width=300))

如图7所示：

关于组件的具体内容介绍，我们会在后续进一步学习。

3 图形和组件混合布局

通过 layout() 方法，可以实现 图形（plots） 和组件（widgets）的混合布局。

1. from bokeh.layouts import layout

2. layout_01 =layout([slider],[p1,p2])

3. show(layout_01)

如图8所示：

这里需要注意的是， slider 和 plot 是放置在一起，但它们之间是没有内在联系的。

对比 Python 中常用的可视化库 Matplotlib， 在 Bokeh 中，对图形和组件进行布局还是比较方便的。布局的功能，会在以后的实践中经常进行使用。

---------------- End ----------------

【推荐内容】

『项目实战』： 世界杯系列 | 福布斯系列 | 求职系列

『Bokeh系列』： 入门 | figure | 基础图形 | CDS | 数据筛选

知识星球

我的知识星球【Python数据之道成长圈】已开通，想加入的同学，请回复数字 “2” 了解详情。

如果您对我的文章感兴趣或者觉得文章内容不错的话，请在阅读后顺便转发到您的圈子里，或者点个赞鼓励我继续前行！ 感谢您的陪伴与支持！

如需加入微信群交流，请添加微信小助手（微信号：147121977，请备注“python”），后续将邀请入群。