Python 學習筆記 : 用 Bokeh 繪製互動式圖表 (二) 散布圖

用過 Bokeh 才知道它功能強大, 所以今天繼續來測試 Bokeh 的散布圖.

本系列之前文章參考 :

# Python 學習筆記 : 用 Bokeh 繪製互動式圖表 (一) 折線圖

Bokeh v3.4 版後官方建議使用 scatter() 方法取代先前用 circle(), square() 這些獨立方法來繪製散布圖的做法, 舊的方法仍可使用, 但執行會出現即將 deprecated 的警告. 新舊介面的對照如下表 : 

Deprecated 方法	推薦寫法（使用 scatter）
fig.circle(x, y, size=...)	fig.scatter(x, y, size=..., marker="circle")
fig.square(x, y, size=...)	fig.scatter(x, y, size=..., marker="square")
fig.cross(x, y, size=...)	fig.scatter(x, y, size=..., marker="cross")
fig.triangle(x, y, size=...)	fig.scatter(x, y, size=..., marker="triangle")
fig.diamond(x, y, size=...)	fig.scatter(x, y, size=..., marker="diamond")
fig.x(x, y, size=...)	fig.scatter(x, y, size=..., marker="x")
fig.asterisk(x, y, size=...)	fig.scatter(x, y, size=..., marker="asterisk")
fig.star(x, y, size=...)	fig.scatter(x, y, size=..., marker="star")

fig.scatter() 的參數結構如下 : 

fig.scatter(x, y=None, *, marker='circle', size=4, color='blue', alpha=1.0, legend_label=None, **kwargs)

參數說明如下表 : 

scatter() 方法的參數	說明
x	x 軸數值序列（list、NumPy array 或 Pandas Series）
y	y 軸數值序列
size	點的大小，單位為 pixel，可為單一數值或對應每點的序列
marker	點的形狀，如 "circle"、"square"、"triangle"、"cross"、"x"、"diamond"、"asterisk"、"star" 等
color	填色，可以為色名（如 "red"）、十六進位（如 "#FF0000"）或 RGB 字串（如 "rgb(255,0,0)" 或"rgba(255,0,0, 0.5)" ）
alpha	透明度，0（完全透明）～1（完全不透明）
line_color	邊框顏色，預設與 color 相同
line_width	邊框寬度（px）
fill_color	內部填色，預設與 color 相同
fill_alpha	內部透明度
legend_label	圖例標籤
name	圖形物件的識別名稱，可用於選取
source	指定 ColumnDataSource 物件作為資料來源

所有顏色參數的值可以是顏色名稱例如 "red", 16 進位色碼例如 "#FF00FF", 或 RGBA 色碼例如 "rgba(255, 0, 255, 0.5)". 

例如 : 

測試 1 : 預設的圓點散布圖 [看原始碼]   

# bokeh-scatter-test-1.py

from bokeh.plotting import figure, show

x=[0, 1, 2, 3, 4, 5]  # x 軸資料

y=[-5, -2, 6, 12, 4, 9]  # y 軸資料

fig=figure(width=400, height=300, title='Bokeh 散布圖')  # 建立 figure 物件

fig.scatter(x, y, marker='circle')  # 繪製圓點散布圖

show(fig)  # 顯示圖表

結果如下 :

可見預設是藍色圓點, 尺寸 4px 似乎有點小, 可用 size 參數設定 (對圓點來說是指直徑). 下面範例同時測試 size 與 color 參數 : 

測試 2 : 設定 size 與 color 參數的圓點散布圖 [看原始碼]   

# bokeh-scatter-test-2.py

from bokeh.plotting import figure, show

x=[0, 1, 2, 3, 4, 5]  # x 軸資料

y=[-5, -2, 6, 12, 4, 9]  # y 軸資料

fig=figure(width=400, height=300, title='Bokeh 散布圖')  # 建立 figure 物件

fig.scatter(

    x,

    y,

    marker='circle',

    size=10,  

    color='red'

    )  # 繪製圓點散布圖

show(fig)  # 顯示圖表

此例將圓點大小設為直徑 10px, 顏色設為紅色, 結果如下 :

color 參數用來設定整個標記符號的顏色, 包含邊框與填滿顏色, 若要分別設定就要使用 line_color (邊框顏色) 與 fill_color (填滿顏色), 填滿顏色還可以用 fill_alpha 設定透明度, 例如 : 

測試 3 : 設定 line_color, fill_color 與 fill_alpha 參數的圓點散布圖 [看原始碼]   

# bokeh-scatter-test-3.py

from bokeh.plotting import figure, show

x=[0, 1, 2, 3, 4, 5]  # x 軸資料

y=[-5, -2, 6, 12, 4, 9]  # y 軸資料

fig=figure(width=400, height=300, title='Bokeh 散布圖')  # 建立 figure 物件

fig.scatter(

    x,

    y,

    marker='circle',

    size=20,

    line_color='black',

    fill_color='red',

    fill_alpha=0.3

    )  # 繪製圓點散布圖

show(fig)  # 顯示圖表

此例將圓點邊框設為黑色, 填滿顏色設為紅色, 填滿透明度設為 0.3, 結果如下 :

測試 4 : 設定 line_width 與 legend_label 參數的圓點散布圖 [看原始碼]   

# bokeh-scatter-test-4.py

from bokeh.plotting import figure, show

x=[0, 1, 2, 3, 4, 5]  # x 軸資料

y=[-5, -2, 6, 12, 4, 9]  # y 軸資料

fig=figure(width=400, height=300, title='Bokeh 散布圖')  # 建立 figure 物件

fig.scatter(

    x,

    y,

    marker='circle',

    size=20,

    line_width=3,

    fill_color='#ff0000',

    legend_label='測試資料'

    )  # 繪製圓點散布圖

show(fig)  # 顯示圖表

此例設定框邊線寬為 4px, 也設定了圖例文字, 結果如下 : 

由於圖例位置預設是右上方 ("top_right"), 遮住了最後一個資料點, 這可以利用 fig.legend[0].location 屬性來更改為左上或右下來避免遮住問題, 例如 : 

測試 5 : 用 fig.legend[0].location 設定圖例位置 [看原始碼]  

# bokeh-scatter-test-5.py

from bokeh.plotting import figure, show

x=[0, 1, 2, 3, 4, 5]  # x 軸資料

y=[-5, -2, 6, 12, 4, 9]  # y 軸資料

fig=figure(width=400, height=300, title='Bokeh 散布圖')  # 建立 figure 物件

fig.scatter(

    x,

    y,

    marker='circle',

    size=20,

    line_width=3,

    fill_color='#ff0000',

    legend_label='測試資料'

    )  # 繪製圓點散布圖

fig.legend[0].location='top_left'  # 設定圖例位置為左上

show(fig)  # 顯示圖表

此例將圖例位置改為左上, 注意, 圖例位置必須在呼叫繪圖方法 scatter() 之後才能設定, 因為這時 Lengend 物件才會存在, 結果如下 :

除了圓點外也可以使用其他標記符號例如方點 : 

測試 6 : 用 marker='square' 繪製方點散布圖 [看原始碼]  

# bokeh-scatter-test-6.py

from bokeh.plotting import figure, show

x=[0, 1, 2, 3, 4, 5]  # x 軸資料

y=[-5, -2, 6, 12, 4, 9]  # y 軸資料

fig=figure(width=400, height=300, title='Bokeh 散布圖')  # 建立 figure 物件

fig.scatter(

    x,

    y,

    marker='square',

    size=10,

    line_color='black',

    fill_color='rgba(0, 255, 255, 0.5)',

    legend_label='測試資料'

    )  # 繪製圓點散布圖

fig.legend[0].location='top_left'  # 設定圖例位置為左上

show(fig)  # 顯示圖表

 

結果如下 :