Dash 中的 HTML

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

重溫 HTML

 

  • HTML：用來結構化網頁內容的語言
    • 使用標籤，如 Div、H1>H6
  • Dash 使用 dash.html 元件
    • H1 標籤是 .H1()
    • Div 標籤是 .Div()
<div>
  <div style=
       "background-color: red; 
        width:250; height:250;">
  </div>
  <div style=
       "background-color: lightblue; 
        width:250; height:250;">
    <h1>This box</h1>
  </div>
</div>
使用 Dash 與 Plotly 建立儀表板

結構化標籤

 

  • 可用 HTML 標籤清單－文件
  • 常用結構標籤：
    • .Br() = 換行
    • .Img() = 插入圖片
使用 Dash 與 Plotly 建立儀表板

HTML Dash 的清單

 

  • .Ul() \ .Ol() 與 .Li() = 建立清單
    • .Ul()：無序清單（項目符號，如本列）
    • .Ol()：有序清單（編號項目）
    • .Li()：單一清單項目
使用 Dash 與 Plotly 建立儀表板

插入公司標誌

 

app.layout = [

  html.Img(src='www.website.com/logo.png'),
  html.H1("Our Sales Dashboard")

]

 

Chrome 瀏覽器左上角的螢幕擷取畫面，URL 顯示伺服器位址。頁面有公司標誌圖片（E-com global 的菱形圖示），下方是標題「Our Sales Dashboard」。

使用 Dash 與 Plotly 建立儀表板

文字標籤

 

設定與格式化文字內容

  • .P() 或 .Span() = 插入純文字
    • 接受 children 參數（文字清單、.P() 或 .Span()）
  • .B() = 粗體 文字
  • .I() = 斜體 文字
使用 Dash 與 Plotly 建立儀表板

Dash 裡的 HTML 文字標籤

 

較複雜的格式：

app.layout = [
   html.H1("Our Sales Dashboard"),

   html.Span(children=[

   f"Prepared: {datetime.now().date()}",

   " by ", html.B("Jessie Parker, "),

   html.I("Data Scientist")

   ])

]

 

與上一張相同的儀表板螢幕擷取：Chrome 視窗左上角可見伺服器位址。大標題為「our sales dashboard」。下方一行顯示「Prepared: 2021-06-27 by Jessie Parker, data scientist」。Jessie Parker 為粗體，data scientist 為斜體。

使用 Dash 與 Plotly 建立儀表板

分行顯示文字

$$

app.layout = [
   html.H1("Our Sales Dashboard"),
   html.Span(children=[
   f"Prepared: {datetime.now().date()}", 
   html.Br(),
   " by ", html.B("Jessie Parker, "),
   html.Br(),
   html.I("Data Scientist")])
    ]

 

與上一張相同的儀表板螢幕擷取：Chrome 視窗左上角可見伺服器位址。大標題為「our sales dashboard」。下方一行顯示「Prepared: 2021-06-27 by Jessie Parker, data scientist」。Jessie Parker 為粗體，data scientist 為斜體。現在在日期與姓名後加入了換行。

使用 Dash 與 Plotly 建立儀表板

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板

Preparing Video For Download...