HTML trong Dash

Xây dựng Dashboard với Dash và Plotly

Alex Scriven

Data Scientist

Ôn lại HTML

 

  • HTML = ngôn ngữ cấu trúc nội dung web
    • Dùng các 'thẻ' như Div, H1>H6
  • Dash dùng các thành phần dash.html
    • Thẻ H1 là .H1()
    • Thẻ Div là .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>
Xây dựng Dashboard với Dash và Plotly

Thẻ cấu trúc

 

  • Danh sách thẻ HTML khả dụng - tài liệu
  • Thẻ cấu trúc quan trọng:
    • .Br() = Ngắt dòng mới
    • .Img() = Chèn ảnh
Xây dựng Dashboard với Dash và Plotly

Danh sách trong HTML Dash

 

  • .Ul() \ .Ol() & .Li() = Tạo danh sách
    • .Ul() cho danh sách không thứ tự (dấu chấm, như ở đây)
    • .Ol() cho danh sách có thứ tự (đánh số)
    • .Li() cho từng phần tử
Xây dựng Dashboard với Dash và Plotly

Chèn logo công ty

 

app.layout = [

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

]

 

Ảnh chụp góc trên trái trình duyệt Chrome với địa chỉ máy chủ trên URL. Trình duyệt hiển thị logo công ty, hình kim cương hồng ghi E-com global. Bên dưới là tiêu đề 'Our Sales Dashboard'

Xây dựng Dashboard với Dash và Plotly

Thẻ văn bản

 

Thiết lập và định dạng văn bản

  • .P() hoặc .Span() = Chèn văn bản thuần
    • Nhận đối số children (danh sách văn bản, .P() hoặc .Span())
  • .B() = In đậm văn bản
  • .I() = In nghiêng văn bản
Xây dựng Dashboard với Dash và Plotly

Thẻ văn bản HTML trong Dash

 

Định dạng phức tạp hơn:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

 

Ảnh chụp góc trên trái cửa sổ Chrome, thanh URL hiển thị địa chỉ máy chủ. Có tiêu đề lớn 'our sales dashboard'; bên dưới là dòng "Prepared: 2021-06-27 by Jessie Parker, data scientist". Tên Jessie Parker in đậm, chức danh data scientist in nghiêng

Xây dựng Dashboard với Dash và Plotly

Ngắt dòng văn bản

$$

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")])
    ]

 

Ảnh chụp cùng bảng điều khiển như slide trước. Góc trên trái cửa sổ Chrome có địa chỉ máy chủ. Tiêu đề lớn 'our sales dashboard'; bên dưới là dòng "Prepared: 2021-06-27 by Jessie Parker, data scientist". Jessie Parker in đậm, data scientist in nghiêng. Nay có ngắt dòng sau ngày và sau tên.

Xây dựng Dashboard với Dash và Plotly

Ayo berlatih!

Xây dựng Dashboard với Dash và Plotly

Preparing Video For Download...