從 Plotly 到 Dash

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

第一個 Dash 應用

 

一個完整的 Dash 應用：

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)
  • 可使用一般 Python 功能
    • 例如，字串插值 print("f{my_variable}")
使用 Dash 與 Plotly 建立儀表板

主要的 Dash 匯入

 

from dash import Dash, dcc
  • Dash 用來初始化應用
  • dcc 提供圖表、輸入等 UI 元件
    • 我們的應用會用到一個元件
    • 之後課程會加入更多元件
使用 Dash 與 Plotly 建立儀表板

應用的版面配置

 

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

 

  • 用 Dash() 建立應用物件
  • 設定 app.layout
    • 使用 dcc.Graph()
      • figure = 要呈現的 Plotly 圖形
      • id = 之後回呼很重要
使用 Dash 與 Plotly 建立儀表板

執行應用

 

if __name__ == '__main__':
    app.run(debug=True)

 

  • 從命令列執行指令碼
    • 例如在命令列輸入 python my_app.py
  • debug 可在測試時提供回饋
使用 Dash 與 Plotly 建立儀表板

我們的應用

 

  • 透過瀏覽器（如 Google Chrome）存取

  • 服務啟動中，更新並儲存 .py 檔即可在瀏覽器即時看到變更

執行 Dash 應用後終端機的截圖。黑底白字顯示與指令碼一致的細節。

使用 Dash 與 Plotly 建立儀表板

瀏覽器中的應用

一個水平長條圖的動圖，x 軸為總銷售額，y 軸為國家。與前一課相同的圖，但顯示在 Chrome 瀏覽器中，網址列可見伺服器位址。滑鼠游標在圖上移動並點入網址列，示範伺服器存在。

使用 Dash 與 Plotly 建立儀表板

在 DataCamp 使用 Dash

 

  • 與其他 DataCamp 練習的差異：
    • 練習頂端有設定程式碼
    • 一次全部執行（非逐行）
    • 程式碼更長
  • 完整可用的儀表板（展開視窗即可查看）

Dash 程式練習上方的截圖，已執行，並標示可展開 HTML 輸出的按鈕，以全螢幕檢視應用。

使用 Dash 與 Plotly 建立儀表板

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板

Preparing Video For Download...