Bokeh中圖形與元件的佈局簡介 | Bokeh 小冊子

摘要： Bokeh 系列文章傳送門： Bokeh小冊子：入門 Bokeh小冊子：figure詳細解讀 Bokeh基礎視覺化圖形 Bokeh中獨特的資料型別簡介： ColumnDataSource | Bokeh 小冊子 Bok...

Bokeh 系列文章傳送門：

• ofollow,noindex">Bokeh小冊子：入門

• Bokeh小冊子：figure詳細解讀

• Bokeh基礎視覺化圖形

• Bokeh中獨特的資料型別簡介： ColumnDataSource | 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. 
   

6. output_notebook()

準備基礎資料和圖形

1. np.random.seed(15)

2. 
   

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

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

5. 
   

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

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

8. 
   

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

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

11. 
    

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

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

14. 
    

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

16. 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.

• sizing mode ("fixed", "stretch both", "scale width", "scale height", "scale both") – How will the items in the layout resize to fill the available space. Default is "fixed". For more information on the different modes see sizing mode 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. 
   

3. show(grid1)

如圖3所示：

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

2. 
   

3. 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. 
   

3. show(grid3)

如圖5所示：

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

2. 
   

3. 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. # 建立一些元件

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

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

8. select = Select(title="Option:", value="Lemon", options=["Python資料之道", "Python", "Java", "PHP"])

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

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

11. 
    

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

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

14. 
    

15. # put the results in a row

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

17. button_group, select,

18. button_2, width=300))

如圖7所示：

關於元件的具體內容介紹，我們會在後續進一步學習。

3 圖形和元件混合佈局

通過 layout() 方法，可以實現 圖形（plots） 和元件（widgets）的混合佈局。

1. from bokeh.layouts import layout

2. 
   

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

4. 
   

5. show(layout_01)

如圖8所示：

這裡需要注意的是， slider 和 plot 是放置在一起，但它們之間是沒有內在聯絡的。

對比 Python 中常用的視覺化庫 Matplotlib， 在 Bokeh 中，對圖形和元件進行佈局還是比較方便的。佈局的功能，會在以後的實踐中經常進行使用。

原文釋出時間為：2018-10-17

本文作者：Python資料之道

本文來自雲棲社群合作伙伴“ Python資料之道 ”，瞭解相關資訊可以關注“ Python資料之道 ”。