Định vị các thành phần Dash

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

Alex Scriven

Data Scientist

HTML và web

HTML: ngôn ngữ cấu trúc website

HTML: khung gỗ của ngôi nhà
- Xác định vị trí các đối tượng
CSS: màu sơn của phòng
- Kiểu dáng (vd: màu nền) của đối tượng

logo HTML chính thức. Có chữ HTML màu xanh

logo CSS chính thức. Có chữ CSS dập nổi màu xanh

Thẻ Div và H

Dash dùng dash.html để kết nối HTML và Python

Hai cấu trúc HTML quan trọng ("thẻ"):

Thẻ div: quan trọng để cấu trúc website
- Có thể có nhiều div kích cỡ khác nhau, chứa nhiều nội dung
Thẻ h: tiêu đề các cỡ (H1 > H6)

Dùng thẻ Div và H

Div tổng (mọi thứ bên trong)
Div bên trong: nền đỏ
Div nền xanh
- Có thẻ H bên trong
Bỏ qua phần style - sẽ nói về 'CSS' sau!

<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>

Ví dụ hiển thị

Hình một khung xanh viền chấm. Bên trong, góc trên trái là ô đỏ đặc. Bên dưới là ô xanh dương có chữ 'This box' và 'another title'

Lưu ý:

Div nền đỏ
Div nền xanh có thẻ H

Ví dụ của chúng ta trong Dash

Tái tạo ví dụ HTML với Dash

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'})
    ]

Phân tích bố cục

Thẻ HTML khớp với html.() của Dash
- html.Div() = <div>
- html.H1() = <h1>
Thẻ div cuối có tham số children
- Danh sách đối tượng đặt bên trong
Cũng có thể đặt cả dcc.Graph() bên trong!

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

Đưa biểu đồ vào bố cục

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

Ảnh gif biểu đồ cột ngang: tổng doanh số trên trục x theo quốc gia trên trục y trong trình duyệt Chrome. Các quốc gia có màu khác nhau. Con trỏ di chuyển qua biểu đồ rồi vào thanh URL có địa chỉ máy chủ

Thêm cấu trúc

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

Ảnh gif cùng ứng dụng như bài trước, nhưng biểu đồ cột bị đẩy xuống dưới, phía trên là một ô nhỏ màu xanh nhạt

Ayo berlatih!

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