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

Bokeh 系列文章传送门：

Bokeh小册子：入门
Bokeh小册子：figure详细解读
Bokeh基础可视化图形
Bokeh中独特的数据类型简介： ColumnDataSource | Bokeh 小册子
Bokeh中数据的添加、修改和筛选 | Bokeh 小册子

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])

from bokeh.io import output_notebook, showfrom bokeh.layouts import column, row, gridplotfrom bokeh.plotting import figureimport numpy as npoutput_notebook()

准备基础数据和图形

np.random.seed(15)x=np.random.randint(1,20,size=6)y=np.random.randint(20,50,size=6)p1 = figure(title='circle',plot_width=300,plot_height=300)p1.circle(x,y,size=20, color='#0071c1')p2 = figure(title='circle_cross',plot_width=300,plot_height=300)p2.circle_cross(x,y,size=20, color='#0071c1',fill_alpha=0.2, line_width=2)p3 = figure(title='circle_x',plot_width=300,plot_height=300)p3.circle_x(x,y,size=20, color='#0071c1',fill_alpha=0.2, line_width=2)p4 = figure(title='cross',plot_width=300,plot_height=300)p4.cross(x,y,size=20, color='#0071c1', line_width=2)

将图形按列进行布局

column_layout = column([p1, p2, p3])show(column_layout)

如图1所示：

1.2 row

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

row_layout = row(p1,p2,p3)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” 来表示。

grid1=gridplot([p1,p2],[p3,])show(grid1)

如图3所示：

grid2=gridplot([p1,p2],[None,p3])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.

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

如图5所示：

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

如图6所示：

2 组件的布局

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

from bokeh.layouts import widgetboxfrom bokeh.models.widgets import Button, RadioButtonGroup, Select, Sliderfrom bokeh.models.widgets import Dropdown, Toggle# 创建一些组件slider = Slider(start=0, end=20, value=1, step=0.5, title="Slider")button_group = RadioButtonGroup(labels=["Option 1", "Option 2", "Option 3"], active=0)select = Select(title="Option:", value="Lemon", options=["Python数据之道", "Python", "Java", "PHP"])button_1 = Button(label="Button 1")button_2 = Button(label="Button 2")menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3", "item_3")]dropdown = Dropdown(label="Dropdown button", button_type="warning", menu=menu)# put the results in a rowshow(widgetbox(button_1, slider,dropdown,               button_group, select,               button_2, width=300))

如图7所示：

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

3 图形和组件混合布局

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

from bokeh.layouts import layoutlayout_01 =layout([slider],[p1,p2])show(layout_01)

如图8所示：

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

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

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

【推荐内容】

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

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

知识星球

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

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

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

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

Table of Contents