Plotly 圖表與圖形

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

什麼是 Dash？

  • 用於建立互動式網頁應用的 Python 函式庫

$$

$$

優點：

  • 免費！不同於 Tableau 或 PowerBI
  • 只用 Python 即可運用 JavaScript
  • 相較網頁應用框架，所需程式碼更少
使用 Dash 與 Plotly 建立儀表板

Plotly 與 Dash

  • 搭配使用，效果佳

$$

  • Dash：可含多個 Plotly 圖表的互動式儀表板
  • 參考此範例

 

金融儀表板範例截圖，包含多種圖表、文字、表格與圖片，並有可滑鼠懸停顯示細節的折線圖

使用 Dash 與 Plotly 建立儀表板

什麼是 Plotly？

 

  • 回顧 Plotly，重點放在 Dash
  • 用於建立現代互動圖表的 Python 函式庫
    • 以 Python 撰寫，封裝 JavaScript
  • 使用 plotly.express 建立圖表

$$

$$

$$

使用 Dash 與 Plotly 建立儀表板

我們的電商資料

  • 電子商務銷售資料集

$$

$$

  • 明細：
    • 商品類別（大、中）與描述
    • 單價、數量（與 OrderValue）
    • 國家
    • 銷售年月

電子商務銷售示意

使用 Dash 與 Plotly 建立儀表板

使用 plotly.express 的折線圖

 

import plotly.express as px

line_graph = px.line(

  data_frame=ecom_sales,
  x='Year-Month',
  y='Total Sales ($)', 
  title='Total Sales by Month')

line_graph.show()

 

每月銷售折線圖的動圖，滑鼠懸停於節點時會顯示月份與銷售額

使用 Dash 與 Plotly 建立儀表板

使用 plotly.express 的長條圖

$$

bar_fig = px.bar(
  data_frame=ecom_sales,
  x='Total Sales ($)',
  y='Country',
  title='Total Sales by Country',

  orientation='h')

bar_fig.show()

 

水平長條圖動圖：x 軸為總銷售額，y 軸為國家。滑鼠懸停於長條上顯示資料

使用 Dash 與 Plotly 建立儀表板

自訂 Plotly 圖表

 

調整長條圖的柱寬：

bar_fig.update_layout({'bargap': 0.5})

bar_fig.show()

$$

$$

$$

參考 Plotly 文件

 

水平長條圖：x 軸為總銷售額，y 軸為國家。與前一張相同，但長條間距更小

使用 Dash 與 Plotly 建立儀表板

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板

Preparing Video For Download...