HTML ใน Dash

การสร้างแดชบอร์ดด้วย 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>

แท็กสำหรับจัดโครงสร้าง

รายการแท็ก HTML ที่ใช้งานได้ - เอกสาร
แท็กสำหรับจัดโครงสร้างที่สำคัญ:
- .Br() = ขึ้นบรรทัดใหม่
- .Img() = แทรกรูปภาพ

รายการใน HTML Dash

.Ul() \ .Ol() & .Li() = สร้างรายการ
- .Ul() สำหรับรายการแบบไม่มีลำดับ (สัญลักษณ์หัวข้อ อย่างที่เห็น!)
- .Ol() สำหรับรายการแบบมีลำดับ (ตัวเลข)
- .Li() สำหรับแต่ละรายการ

การแทรกโลโก้บริษัท

app.layout = [

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

]

ภาพหน้าจอมุมบนซ้ายของเบราว์เซอร์ Chrome ที่แสดง URL ของเซิร์ฟเวอร์ มีโลโก้บริษัทและไดมอนด์สีชมพูระบุ E-com Global ด้านล่างเป็นหัวเรื่อง 'Our Sales Dashboard'

แท็กข้อความ

กำหนดและจัดรูปแบบเนื้อหาข้อความ

.P() หรือ .Span() = แทรกข้อความธรรมดา
- รับอาร์กิวเมนต์ children (รายการข้อความ, .P() หรือ .Span())
.B() = ทำข้อความให้ตัวหนา
.I() = ทำข้อความให้ตัวเอียง

แท็กข้อความ HTML ใน Dash

ตัวอย่างการจัดรูปแบบที่ซับซ้อน:

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 เป็นตัวเอียง

การแบ่งบรรทัดข้อความ

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