定位 Dash 元件

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

HTML 與網路

HTML：用來建構網站的語言

HTML：房子的木構架
- 決定物件的位置
CSS：房間的油漆顏色
- 物件的樣式（例如背景色）

官方 HTML 標誌。以藍色字寫著 HTML

官方 CSS 標誌。以浮凸藍色字寫著 CSS

Div 與 H 標籤

Dash 透過 dash.html 連結 HTML 與 Python

兩個重要的 HTML 結構（「標籤」）：

Div 標籤：用於網頁結構化
- 可有多個不同大小的 div，內含不同內容
H 標籤：不同大小的標題（H1 > H6）

使用 Div 與 H 標籤

最外層 div（包住所有內容）
內層 div：紅色背景
藍色背景的 div
- 內含 H 標籤
先忽略 style 部分——之後再談「CSS」！

<div>
  <div style="background-color: red; 
              width:250; height:250;">
  </div>
  <div style="background-color: lightblue; 
              width:250; height:250;">
    <h1>This box</h1>
    <h2>Another Title</h2>
  </div>
</div>

範例顯示效果

一個藍色框，邊框為虛線。內部左上方有一個實心紅色框。下方有一個實心藍色框，內有文字「This box」與「another title」

重點：

紅色背景的 div
含 H 標籤的藍色背景 div

Dash 中的範例

用 Dash 重現 HTML 範例

from dash import Dash, html
app = Dash()
app.layout = [
    html.Div(style={'height':250, 'width':250, 'background-color':'red'}),
    html.Div(children=[
        html.H1("This box"),
        html.H2("Another Title")], 
        style={'background-color':'lightblue'})
    ]

解析版面配置

HTML 標籤對應 Dash 的 html.()
- html.Div() = <div>
- html.H1() = <h1>
最後一個 div 有 children 參數
- 放入要置中的物件清單
也能放入 dcc.Graph() 元件！

from dash import Dash, html
app.layout = [
  html.Div(
    style={'background-color':'red', 
           'height':250, 'width':250}),
  html.Div(
  children=[
      html.H1("This box"),
      html.H2("Another Title")]
    ,style={'background-color':'lightblue', 
              'height':250, 'width':250})
]

版面中的圖表

bar_fig_country = px.bar(ecom_sales, 
 x='Total Sales ($)', y='Country',
 color='Country', color_discrete_map=
 {'United Kingdom':'lightblue', 
 'Germany':'orange', 'France':'darkblue', 
 'Australia':'green', 'Hong Kong':'red'})
app = Dash()

app.layout = [
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

一個 Chrome 瀏覽器中的水平長條圖動圖，x 軸為總銷售額，y 軸為國家，各國顏色不同。滑鼠先停在圖上，接著移到位址列顯示伺服器位址

加入更多結構

app.layout = [
  html.Div(style={
    'width':150,'height':150, 
    'background-color':'lightblue'}),
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

與前一練習相同的應用程式動圖，但長條圖被往下推，上方新增一個小的淡藍色方塊

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板