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 构建仪表板

插入公司 Logo

 

app.layout = [

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

]

 

Chrome 浏览器左上角的截图，URL 为服务器地址。页面显示公司 Logo（粉色菱形，写有 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 窗口左上角的截图，URL 栏可见服务器地址。大标题为"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 窗口左上角，URL 栏可见服务器地址。大标题为"our sales dashboard"；下方一行文字为"Prepared: 2021-06-27 by Jessie Parker, data scientist"。"Jessie Parker"是粗体，"data scientist"是斜体。现在在日期和姓名后有换行。

使用 Dash 和 Plotly 构建仪表板

Vamos praticar!

使用 Dash 和 Plotly 构建仪表板

Preparing Video For Download...