การจัดตำแหน่ง Dash components

การสร้างแดชบอร์ดด้วย Dash และ Plotly

Alex Scriven

Data Scientist

HTML และเว็บ

HTML: ภาษาสำหรับสร้างโครงสร้างเว็บไซต์

HTML: เปรียบเหมือนโครงไม้ของบ้าน
- กำหนดตำแหน่งของวัตถุต่างๆ
CSS: เปรียบเหมือนสีทาห้อง
- กำหนดสไตล์ (เช่น สีพื้นหลัง) ของวัตถุ

โลโก้ HTML อย่างเป็นทางการ มีคำว่า HTML เป็นตัวอักษรสีน้ำเงิน

โลโก้ CSS อย่างเป็นทางการ มีคำว่า CSS เป็นตัวอักษรสีน้ำเงินนูน

Div และ H tags

Dash ใช้ dash.html เป็นตัวกลางระหว่าง HTML กับ Python

โครงสร้าง HTML ที่สำคัญ 2 แบบ ('แท็ก'):

Div tags: สำคัญสำหรับการจัดโครงสร้างเว็บไซต์
- สามารถมี div หลายขนาดและหลายเนื้อหาได้
H tags: หัวข้อขนาดต่างๆ (H1 > H6)

การใช้ Div และ H tags

Div หลัก (ครอบทุกอย่างไว้ภายใน)
Div ภายใน: พื้นหลังสีแดง
Div พื้นหลังสีน้ำเงิน
- มี H tags อยู่ภายใน
ข้ามส่วน 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 พื้นหลังสีแดง
Div พื้นหลังสีน้ำเงินพร้อม H tags

ตัวอย่างใน Dash

สร้างตัวอย่าง HTML ใหม่ด้วย 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'})
    ]

วิเคราะห์โครงสร้าง layout

HTML tags ตรงกับ html.() ใน Dash
- html.Div() = <div>
- html.H1() = <h1>
Div สุดท้ายมี argument ชื่อ children
- เป็น list ของ object ที่จะวางไว้ภายใน
สามารถใส่ dcc.Graph() components ไว้ภายในได้ด้วย!

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

กราฟใน layout

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

ภาพ GIF ของ horizontal bar chart แสดงยอดขายรวมบนแกน x และประเทศบนแกน y ในเว็บเบราว์เซอร์ Chrome แต่ละประเทศมีสีต่างกัน เมาส์เลื่อนผ่านกราฟและเข้าไปที่แถบ URL ซึ่งแสดงที่อยู่เซิร์ฟเวอร์

เพิ่มโครงสร้างให้มากขึ้น

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

ภาพ GIF ของแอปเดิม แต่กราฟแท่งถูกเลื่อนลงมา และมีกล่องสีฟ้าอ่อนขนาดเล็กอยู่ด้านบน

มาฝึกกันเถอะ!

การสร้างแดชบอร์ดด้วย Dash และ Plotly