最近學完了一套很棒的 Python Wen app 工具 Streamlit, 它以 st.plotly_chart() 函式原生支援 Plotly 所繪製的互動式圖片, 為了做這項測試我複習了一遍 Plotly 的用法 (第一次學習 Plotly 已是 2022 年的事了), 同時也發現了它在資料視覺化應用上的價值 : 互動性 + Web-based + 豐富的圖形類型, 值得好好來學習.
本系列之前的測試文章參考 :
更多 Python 資料視覺化學習筆記參考 :
在繼續 plotly 的學習之前, 先摘要整理一下背景知識.
1. plotly.graph_objs 與 plotly.express 模組 :
plotly 套件是由加拿大 Plotly 公司於 2016 年推出的 Python 開源互動式繪圖套件, 最早提供的是底層低階的 plotly.graph_objs 模組, 其功能強大提供極高的自訂能力, 可建立任何圖表元素, 軸線, 圖例, 動畫控制等, 讓使用者以類似拼積木的方式手動組合整個圖表, 但缺點是語法較冗長, 對初學者而言學習曲線較陡.
Plotly 公司為了簡化視覺化流程於 2019 年推出快捷版繪圖模組 plotly.express 加入 plotly 主套件中, 主打類似 Seaborn 的 "一行程式即可產生漂亮圖表" 的快捷繪圖功能, 事實上 plotly.express 只是將繪圖細節做了巧妙包裝, 它在背後其實是去呼叫底層的 plotly.graph_objs 模組與 Figure 物件來完成大量的手動圖表建構工作, 兩者的功能比較如下表 :
| 功能/模組 | plotly.graph_objs | plotly.express |
|---|---|---|
| 抽象層級 | 低階，需自行設定圖表細節 | 高階，簡化流程，快速繪圖 |
| 程式碼簡潔度 | 較冗長，需組裝圖形元素 | 非常簡潔，幾行即可完成 |
| 彈性與客製化 | 高度可自訂，適合複雜圖形 | 中等，適用常見圖形設定 |
| 資料來源格式 | list、dict、DataFrame 皆可 | 建議使用 pandas DataFrame |
| 支援圖形種類 | 完整支援所有圖表 | 僅支援常見圖表（如 bar, line, scatter） |
| 使用場景 | 需要精細控制、Dash 整合 | 資料探索、快速視覺化 |
| 動畫與互動支援 | 完全支援，自訂自由度高 | 部分支援，設定較簡單 |
後續測試將以簡潔快速的 plotly.express 模組為主, 它所提供的 30 種繪圖函式摘要說明如下表 :
| plotly.express 模組的繪圖函式 | 說明 |
|---|---|
| scatter(data_frame, x, y, **kwargs) | 散點圖 |
| line(data_frame, x, y, **kwargs) | 折線圖 |
| area(data_frame, x, y, **kwargs) | 面積圖（堆疊折線圖） |
| bar(data_frame, x, y, **kwargs) | 長條圖 |
| funnel(data_frame, x, y, **kwargs) | 漏斗圖 |
| timeline(data_frame, x, y, **kwargs) | 時間軸圖（Gantt 類型） |
| pie(data_frame, names, values, **kwargs) | 圓餅圖 |
| sunburst(data_frame, path, values, **kwargs) | 旭日圖 |
| treemap(data_frame, path, values, **kwargs) | 樹狀圖 |
| icicle(data_frame, path, values, **kwargs) | 冰柱圖 |
| scatter_matrix(data_frame, dimensions, **kwargs) | 散點矩陣圖 |
| parallel_coordinates(data_frame, dimensions, **kwargs) | 平行座標圖 |
| parallel_categories(data_frame, dimensions=None, **kwargs) | 平行分類圖 |
| density_contour(data_frame, x, y, **kwargs) | 密度等高線圖 |
| density_heatmap(data_frame, x, y, **kwargs) | 密度熱力圖 |
| histogram(data_frame, x=None, y=None, **kwargs) | 直方圖 |
| box(data_frame, x=None, y=None, **kwargs) | 箱型圖 |
| violin(data_frame, x=None, y=None, **kwargs) | 小提琴圖 |
| strip(data_frame, x=None, y=None, **kwargs) | 條帶圖 |
| scatter_3d(data_frame, x, y, z, **kwargs) | 3D 散點圖 |
| line_3d(data_frame, x, y, z, **kwargs) | 3D 折線圖 |
| scatter_geo(data_frame, locations, **kwargs) | 地理散點圖 |
| choropleth(data_frame, locations, color, **kwargs) | 地圖著色圖 |
| scatter_mapbox(data_frame, lat, lon, **kwargs) | Mapbox 地圖散點圖 |
| choropleth_mapbox(data_frame, geojson, locations, color, **kwargs) | Mapbox 地圖著色圖 |
| density_mapbox(data_frame, lat, lon, **kwargs) | Mapbox 熱力圖 |
| scatter_polar(data_frame, r, theta, **kwargs) | 極座標散點圖 |
| line_polar(data_frame, r, theta, **kwargs) | 極座標折線圖 |
| bar_polar(data_frame, r, theta, **kwargs) | 極座標長條圖 |
| imshow(img_array, **kwargs) | 影像資料視覺化（2D array） |
使用 plotly.express 模組繪圖通常在匯入時取簡名 px 以減少打字長度, 呼叫上表中的繪圖函式並傳入必要參數 (資料來源為字典或 DataFrame) 會傳回一個 Figure 物件 (圖表物件), 然後呼叫其 show() 方法就會建立一個 HTML 網頁檔並自動開啟瀏覽器來顯示這個網頁.
Figure 物件提供了許多方法可靈活地操作圖表配置與圖層的外觀, 對於使用 plotly.express 模組繪圖而言, 最常用之方法如下表所示 :
| Figure 物件常用方法 | 說明 |
|---|---|
update_layout() |
設定整體圖表外觀 (標題, 大小, 背景, 圖例, 座標軸標籤等) |
update_traces() |
調整資料圖層樣式（線型、顏色、標記大小、hover 樣式等） |
update_xaxes() |
調整 x 軸屬性（網格、刻度、方向等） |
update_yaxes() |
調整 y 軸屬性（網格、刻度、方向等） |
add_annotation() |
在圖中加上註解文字（標註最大值、最低點、特殊事件等, 可搭配箭頭） |
show() |
在互動環境中（Jupyter Notebook 或瀏覽器）顯示圖表 |
使用 plotly.express 模組的繪圖程式基本架構例如 :
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data={
'x軸資料': [...],
'y軸資料': [...]
}
# 可以轉成 DataFrame
data=pd.DataFrame(data)
# 1. 建立 Figure 圖表物件 (加上初始 trace)
fig=px.xxx(data, x='欄位1', y='欄位2', 其他參數...) # 例如 px.line()
# 2. 更新整體圖表配置 (標題, 圖例, 背景, 軸設定等)
fig.update_layout(
title='主標題',
xaxis_title='X 軸名稱',
yaxis_title='Y 軸名稱',
width=800,
height=400,
legend=dict(orientation='h')
)
# 3. 更新資料圖層的外觀 (顏色, 大小, 模式等)
fig.update_traces(
line=dict(color='green', dash='dash'),
marker=dict(size=10, color='red')
)
# 4. 顯示圖表
fig.show()
fig.update_layout() 方法的常用參數如下表 :
| fig.update_layout() 參數 | 說明 |
|---|---|
| title | 設定圖表標題（可為字串或字典，支援位置、字體等設定） |
| xaxis | 設定 x 軸配置，例如範圍、網格、標籤、顏色等 |
| yaxis | 設定 y 軸配置，例如範圍、網格、標籤、顏色等 |
| width | 圖表寬度（以像素為單位） |
| height | 圖表高度（以像素為單位） |
| plot_bgcolor | 繪圖區背景顏色（如 'white'、'#f0f0f0'） |
| paper_bgcolor | 整個圖表區域（含標題、圖例）的背景色 |
| font | 整體字體設定（字型、大小、顏色），為字典型態 |
| legend | 圖例位置與樣式設定（如位置、方向、字體） |
| margin | 圖表四邊邊距，設定 top/right/bottom/left 整數像素值 |
| showlegend | 是否顯示圖例，布林值（True/False） |
| template | 使用內建或自定義的主題風格（如 'plotly_white'） |
| hovermode | 設定滑鼠懸停時的行為，如 'closest' 或 'x unified' |
| barmode | 設定長條圖類型（如 'group'、'stack'） |
fig.update_layout() 方法的常用參數如下表 :
| fig.update_layout() 參數 | 說明 |
|---|---|
| marker | 控制點或條狀的外觀字典（包含顏色、大小、邊框、透明度等） |
| marker.color | 設定資料點或長條的顏色（可為單一色碼或一組顏色） |
| marker.line.color | 設定資料點邊框或長條邊框的顏色 |
| marker.line.width | 設定資料點或長條邊框的粗細 |
| opacity | 設定圖形透明度（0.0 ~ 1.0） |
| text | 每個點/條所顯示的文字標籤 |
| textposition | 設定文字顯示位置，如 'inside'、'outside'、'top right' 等 |
| texttemplate | 進階格式的文字模板，可用 %{value}、%{x}、%{y} 插入變數 |
| hoverinfo | 設定 hover 時顯示哪些資訊，如 'x+y+text' |
| hovertemplate | 自訂 hover 顯示內容，支援變數與 HTML |
| mode | （僅限 scatter）設定模式，如 'lines'、'markers'、'lines+markers' |
| line.color | （折線圖用）設定線條顏色 |
| line.width | （折線圖用）設定線條粗細 |
| orientation | 長條方向：'v'（垂直）或 'h'（水平） |
| visible | 設定圖形是否顯示，可為 True、False 或 'legendonly' |
2. plotly.express 模組的內建資料集 :
plotly.express 內建了 10 個小型資料集, 方便使用者能快速體驗 Plotly 的繪圖功能, 這些資料集涵蓋了常見的統計, 分類, 地圖, 時間序列, 風向, 餐飲, 選舉等應用情境, 適合初學者做資料視覺化練習. 這些資料集以函式的形式存放在 plotly.express.data 模組下, 內容摘要如下表 :
| plotly.express.data 資料集 | 說明 |
|---|---|
gapminder() |
全球國家的人口、壽命與人均 GDP（1952–2007） |
iris() |
經典 150 筆鳶尾花資料集 (分類與散佈圖分析) |
tips() |
餐廳消費與小費資料 (回歸分析和相關性分析) |
titanic() |
鐵達尼號乘客資料（性別、年齡、船艙、存活與否） |
election() |
美國 2013 年地方選舉資料（地圖應用範例） |
wind() |
風向與風速資料，適用於極座標圖與玫瑰圖 |
carshare() |
共乘密度資料，含地點與時間等欄位，適合地圖或時間熱度圖 |
medals_long() |
奧運金銀銅牌資料（長格式），適合繪製堆疊直條圖 |
medals_wide() |
奧運獎牌資料（寬格式），可用於分組直條圖 |
stocks() |
模擬的股票價格資料，適合時間序列折線圖 |
呼叫這些函式會傳回一個 Pandas DataFrame, 可直接傳給 px.*() 函式繪製圖表, 這讓初學者能快速取得資料以便學習與測試 Plotly 的資料視覺化功能.
>>> import plotly.express as px
>>> type(px.data)
<class 'module'>
>>> dir(px.data)
['__all__', '__builtins__', '__cached__', '__doc__', '__file__', '__loader__', '__name__', '__package__', '__path__', '__spec__', 'absolute_import', 'carshare', 'election', 'election_geojson', 'experiment', 'gapminder', 'iris', 'medals_long', 'medals_wide', 'stocks', 'tips', 'wind']
例如 GDP 資料集 gapminder() :
>>> df=px.data.gapminder()
>>> df.columns
Index(['country', 'continent', 'year', 'lifeExp', 'pop', 'gdpPercap',
'iso_alpha', 'iso_num'],
dtype='object')
>>> len(df)
1704
可見此資料集有 10 個欄位, 共有 1704 筆資料.
欄位說明如下表 :
| gapminder() 欄位名稱 | 說明 |
|---|---|
| country | 國家名稱（類別型資料） |
| continent | 洲別，如 Asia、Europe（類別型資料） |
| year | 年份，從 1952 到 2007，每隔 5 年（數值型資料） |
| lifeExp | 預期壽命（數值型資料） |
| pop | 人口總數（數值型資料） |
| gdpPercap | 人均 GDP（數值型資料） |
3. 用 plotly.express 繪製直條圖 :
plotly.express 的直條圖函式 px.bar() 參數結構如下 :
px.bar(data, x, y, *,
color=None,
text=None,
facet_row=None,
facet_col=None,
barmode='relative',
orientation='v',
width=None,
height=None,
title=None,
template='plotly',
labels=None,
category_orders=None,
**kwargs)
參數說明如下表 :
| plotly.express.bar() 參數 | 說明 |
|---|---|
| data | 資料來源，可為 DataFrame 或 dict 格式 ✅ 必要參數 |
| x | x 軸欄位名稱 ✅ 必要參數 |
| y | y 軸欄位名稱 ✅ 必要參數 |
| color | 根據欄位值區分長條顏色 |
| text | 在長條上顯示的文字內容（例如數值） |
| barmode | 長條排列模式：'group'（並列）或 'relative'（堆疊），預設為 'relative' |
| orientation | 'v' 垂直長條（預設）、'h' 水平長條 |
| facet_row / facet_col | 依欄位分成多個子圖（小 multiples） |
| width / height | 設定圖表寬度與高度（單位為像素） |
| title | 設定圖表標題 |
| template | 設定樣式主題，如 'plotly_white'、'simple_white'、'plotly_dark' |
| labels | 自訂軸標籤顯示文字，格式為字典 |
| category_orders | 自訂類別軸的順序 |
| **kwargs | 其他可選參數，如 hover_name、opacity、log_y 等 |
其中前三個位置參數 data, x, y 為必要參數. 注意, Plotly 中的顏色可以使用顏色名稱如 'red', 16 進位色碼 '#RRGGBB', 10 進位色碼 'rgba(r, g, b, a)' 或 'rgb(r, g, b)'.
例如 :
# plotly-bar-test-1.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data={
'月份': ['一月', '二月', '三月', '四月', '五月'],
'營收': [120000, 135000, 99000, 150000, 170000]
}
# 建立 Figure 圖表物件
fig=px.bar(data, x='月份', y='營收', width=800, height=600)
# 顯示圖表
fig.show()
此例使用字典做為資料來源傳給 px.bar() 的第一參數, 指定字典的鍵名稱為 x, y 參數, 並且用 width 與 height 設定圖表尺寸, 結果如下 :
可見預設的長條圖為藍色, 滑鼠移動到長條上會出現 tooltip 顯示資料點的數值, 且右上角有互動工具可縮放圖表或將圖表下載為 PNG 圖檔等.
可以在呼叫 fig.update_traces() 設定長條的顏色與寬度, 以及其邊框的顏色與寬度, 例如 :
測試 2 : 設定長條與其邊框的顏色與寬度 [看原始碼]
# plotly-bar-test-2.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data={
'月份': ['一月', '二月', '三月', '四月', '五月'],
'營收': [120000, 135000, 99000, 150000, 170000]
}
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(data, x='月份', y='營收', width=800, height=600)
# 更新資料圖層的外觀 (直條顏色, 寬度)
fig.update_traces(
marker_color='cyan', # 長條顏色
width=0.4, # 長條寬度 0~1
marker_line_color='blue', # 長條邊框顏色
marker_line_width=2 # 長條邊框寬度 px
)
# 顯示圖表
fig.show()
此例呼叫 fig.update_traces() 更新圖層, 設定長條顏色寬度與其邊框之顏色寬度, 結果如下 :
上面範例中的 Y 軸刻度值都被精簡顯示為以 K 為單位, 這可以透過呼叫 fig.update_layout() 並傳入 yaxis_tickformat="," 參數將 Y 軸刻度改為以千分位表示, 例如 :
測試 3 : 設定 Y 軸以千分位刻度值顯示 [看原始碼]
# plotly-bar-test-3.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data=pd.DataFrame({
'月份': ['一月', '二月', '三月', '四月', '五月'],
'營收': [120000, 135000, 99000, 150000, 170000]
})
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(data, x='月份', y='營收', width=800, height=600)
# 更新資料圖層的外觀 (直條顏色, 寬度)
fig.update_traces(
marker_color='orange', # 長條顏色
width=0.5 # 長條寬度 0~1
)
fig.update_layout(
yaxis_tickformat=',', # Y 軸以千分位例如 8,000 顯示
)
# 顯示圖表
fig.show()
此例在呼叫 fig.update_layout() 時傳入 yaxis_tickformat=',' 設定 Y 軸刻度值以千分位格式顯示, 同時資料來源也改用 DataFrame, 結果如下 :
呼叫 fig.update_layout() 時傳入 title 參數可設定圖表標題, 例如 :
測試 4 : 設定圖表標題 [看原始碼]
# plotly-bar-test-4.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data=pd.DataFrame({
'月份': ['一月', '二月', '三月', '四月', '五月'],
'營收': [120000, 135000, 99000, 150000, 170000]
})
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(data, x='月份', y='營收', width=800, height=600)
# 更新資料圖層的外觀 (直條顏色, 寬度)
fig.update_traces(
marker_color='navy', # 長條顏色
width=0.5 # 長條寬度 0~1
)
fig.update_layout(
plot_bgcolor='rgb(255, 255, 255)', # 繪圖區背景色
paper_bgcolor='#f0f0f0', # 整個畫布背景色
title='今年前五月營收'
)
# 顯示圖表
fig.show()
此例同時也展示了三種顏色表示法, 結果如下 :
可見預設的標題位置在左上角.
若要設定圖表標題位置, 則 title 參數不要傳入字串, 而是要傳入含有 text, x, y, xanchor, yanchor, 與 font 六個鍵的字典, 標題文字改在 text 鍵, 字型用 font 字典設定, 其它 4 個鍵用來精確定位標題位置, 說明如下表 :
| title 參數字典的鍵 | 說明 |
|---|---|
| text | 設定標題的文字內容。 |
| x | 設定標題的水平位置，範圍為 0（左）到 1（右），預設為 0.5。 |
| xanchor | 設定標題的水平對齊方式，可為 'left' (預設)、'center' 或 'right'。 |
| y | 設定標題的垂直位置，範圍為 0（底）到 1（頂），預設約為 0.95。 |
| yanchor | 設定標題的垂直對齊方式，可為 'top'、'middle' (預設) 或 'bottom'。 |
| font | 設定字型的字典，含有 family、size 與 color 三個鍵。 |
標題放在圖片上方的話, y 的預設值 0.95 應該蠻恰當的不用改, 若放在下方則因為要與 X 軸刻度保持一些距離設為 0.03 較好. yanchor 使用預設值 'middle' 即可. 例如 :
測試 5 : 設定圖表標題位置 [看原始碼]
# plotly-bar-test-5.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data=pd.DataFrame({
'月份': ['一月', '二月', '三月', '四月', '五月'],
'營收': [120000, 135000, 99000, 150000, 170000]
})
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(data, x='月份', y='營收', width=800, height=600)
# 更新資料圖層的外觀 (直條顏色, 寬度)
fig.update_traces(
marker_color='navy', # 長條顏色
width=0.5 # 長條寬度 0~1
)
fig.update_layout(
plot_bgcolor='rgb(255, 255, 255)', # 繪圖區背景色
paper_bgcolor='#f0f0f0', # 整個畫布背景色
title=dict(
text='今年前五月營收',
x=0.5,
xanchor='center',
y=0.95,
yanchor='middle',
font=dict(
family='Arial',
size=24,
color='red'
)
)
)
# 顯示圖表
fig.show()
此例將紅色的標題設在圖片上方中央, 結果如下 :
通常圖表標題都放在上方中央, 只需要設定 x=0.5 與 xanchor='center' 即可.
有時 X 軸刻度標籤較長 (例如日期), 這時就需要旋轉一個角度避免刻度標籤重疊, 這可以在呼叫 fig.update_layout() 時傳入 xaxis_tickangle 參數, 其值為正時順時針旋轉; 為負時逆時針旋轉, 例如 :
測試 6 : 設定 X 軸刻度標籤旋轉角度 [看原始碼]
# plotly-bar-test-6.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data=pd.DataFrame({
'月份': ['一月', '二月', '三月', '四月', '五月'],
'營收': [120000, 135000, 99000, 150000, 170000]
})
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(data, x='月份', y='營收', width=800, height=600)
# 更新資料圖層的外觀 (直條顏色, 寬度)
fig.update_traces(
marker_color='navy', # 長條顏色
width=0.5 # 長條寬度 0~1
)
fig.update_layout(
plot_bgcolor='cyan', # 繪圖區背景色
paper_bgcolor='#f0f0f0', # 整個畫布背景色
title='今年前五月營收',
xaxis_tickangle=-90 # 正為順時針,負為逆時針
)
# 顯示圖表
fig.show()
此例旋轉角度 -90 為由預設水平逆時針 90 度, 結果如下 :
Plotly 預設會依據 X, Y 軸資料是否為數值來自動顯示網格線, 如果是類別 (categorical) 資料則預設不顯示網格線, 例如上面範例中的 X 軸月份資料為類別型故不顯示網格線; Y 軸營收是數值則顯示.
如果要強制顯示或隱藏網格線, 可呼叫 fig.update_layout() 並傳入 xaxis 字典參數, 設定 showgrid 鍵為 True (顯示) 或 False (不顯示). 除了 showgrid 鍵外, 還可以用 gridwidth (單位 px) 與 gridcolor 來設定網格線的粗細與顏色, 例如 :
測試 7 : 設定網格線 (顯示與否及粗細顏色) [看原始碼]
# plotly-bar-test-7.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data=pd.DataFrame({
'月份': ['一月', '二月', '三月', '四月', '五月'],
'營收': [120000, 135000, 99000, 150000, 170000]
})
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(data, x='月份', y='營收', width=800, height=600)
# 更新資料圖層的外觀 (直條顏色, 寬度)
fig.update_traces(
marker_color='navy', # 長條顏色
width=0.5 # 長條寬度 0~1
)
fig.update_layout(
title='今年前五月營收',
xaxis=dict(
showgrid=True,
gridwidth=1,
gridcolor='red'
),
yaxis=dict(
showgrid=True,
gridwidth=1,
gridcolor='red'
)
)
# 顯示圖表
fig.show()
此例將 X, Y 軸網格線均強制顯示, 結果如下 :
類別資料的 X 軸有網格線很奇怪, 這就是為何 Plotly 預設要隱藏它的緣故.
最後來看看兩組 Y 軸資料的長條圖, 在繪製之前要先將原本的寬格式 DataFrame :
用 melt() 方法轉成長格式的 DataFrame, 例如 :
例如 :
測試 8 : 兩組 Y 軸資料的堆疊式長條圖 [看原始碼]
# plotly-bar-test-8.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data=pd.DataFrame({
'月份': ['一月', '二月', '三月', '四月', '五月'],
'今年營收': [120000, 135000, 99000, 150000, 170000],
'去年營收': [110000, 125000, 95000, 145000, 160000]
})
# 將寬表格轉為長表格
data=data.melt(id_vars='月份', var_name='年度', value_name='營收')
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(
data,
x='月份',
y='營收',
color='年度',
width=800,
height=600
)
# 顯示圖表
fig.show()
此例呼叫 DataFrame 的 melt() 方法將 id_vars 指定的月份欄位以外的所有欄位融化到 value_name 指定的新增欄位 ('營收'), 然後把被融化的欄位名稱組成串列放進 var_name 所指定的新增欄位裡 (類別), 結果如下 :
可見預設是堆疊式 (stacked) 長條圖, 而且自動出現圖例.
如果要繪製群組式長條圖, 則呼叫 px.bar() 時要傳入 barmode='group', 例如 :
測試 9 : 兩組 Y 軸資料的群組式長條圖 (1) [看原始碼]
# plotly-bar-test-9.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data=pd.DataFrame({
'月份': ['一月', '二月', '三月', '四月', '五月'],
'今年營收': [120000, 135000, 99000, 150000, 170000],
'去年營收': [110000, 125000, 95000, 145000, 160000]
})
# 將寬表格轉為長表格
data=data.melt(id_vars='月份', var_name='年度', value_name='營收')
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(
data,
x='月份',
y='營收',
color='年度',
width=800,
height=600,
barmode='group' # 群組式長條圖
)
# 顯示圖表
fig.show()
結果如下 :
直條的顏色是 Plotly 自動指配的, 但可以用 color_discrete_map 參數字典來設定, 鍵就是分群欄位名稱, 例如 :
測試 10 : 兩組 Y 軸資料的群組式長條圖 (2) [看原始碼]
# plotly-bar-test-10.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
data=pd.DataFrame({
'月份': ['一月', '二月', '三月', '四月', '五月'],
'今年營收': [120000, 135000, 99000, 150000, 170000],
'去年營收': [110000, 125000, 95000, 145000, 160000]
})
# 將寬表格轉為長表格
data=data.melt(id_vars='月份', var_name='年度', value_name='營收')
# 建立 Figure 圖表物件 (加上初始 trace)
fig=px.bar(
data,
x='月份',
y='營收',
color='年度',
width=800,
height=600,
barmode='group', # 群組式長條圖
color_discrete_map={
'今年營收': '#00ff00',
'去年營收': 'rgba(0, 0, 255, 0.3)'
}
)
# 顯示圖表
fig.show()
結果如下 :
最後使用 Plotly 內建資料集 gapminder() 繪製 2007 年全球各洲各國 GDP 的長條圖 :
測試 11 : 2007 年全球各洲各國 GDP 的長條圖 [看原始碼]
# plotly-bar-test-11.py
import plotly.express as px
import pandas as pd
# 資料來源 (可以是字典或 DataFrame)
df=px.data.gapminder()
# 篩選 2007 年資料
df_2007=df[df['year'] == 2007]
# 建立 Figure 圖表物件繪製群組式長條圖
fig=px.bar(
df_2007,
x='continent', # x 軸: 洲
y='gdpPercap', # y 軸: 人均 GDP
color='country', # 群組分類: 國家
barmode='group', # 群組式長條圖
title='2007 各洲各國人均 GDP'
)
# 顯示圖表
fig.show()
結果如下 :
放大亞洲部分 :
沒有留言 :
張貼留言