การเพิ่มรายการ HTML ใน Dash
ขณะทำงานอยู่ที่โต๊ะ เพื่อนร่วมงานจากฝ่ายการตลาดเห็นแดชบอร์ดที่คุณสร้างล่าสุดและขอให้ช่วยสร้างแดชบอร์ดให้พวกเขาบ้าง โดยต้องการแผนภูมิแท่งแสดงหมวดหมู่ยอดนิยมตามยอดขายรวม พร้อมรายการด้านล่างที่ระบุหมวดหมู่อันดับต้น ๆ สำหรับดูอย่างรวดเร็ว
พวกเขามีข้อกำหนดด้านรูปแบบเพิ่มเติมเล็กน้อย ซึ่งทั้งหมดอยู่ในขอบเขตความรู้ที่มีจากการทำงานกับ HTML และ Dash ที่ผ่านมา
งานของคุณคือขยายแดชบอร์ดที่สร้างไว้ให้รวมรายการหมวดหมู่อันดับต้น ๆ พร้อมยอดขายด้วย
แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร
การสร้างแดชบอร์ดด้วย Dash และ Plotly
คำแนะนำการฝึกหัด
- สร้างรายการแบบมีลำดับใต้บรรทัดที่
20โดยใช้ Dash - เพิ่มองค์ประกอบรายการสองรายการที่บรรจุตัวแปร
num1_catและnum2_catพร้อมยอดขายลงในรายการแบบมีลำดับใต้บรรทัดที่22 - เพิ่มการขึ้นบรรทัดใหม่ใต้บรรทัดที่
26เพื่อให้ข้อความลิขสิทธิ์แสดงในบรรทัดของตัวเอง
แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ
ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
num1_cat, num1_salesvol = ecom_category.loc[0].tolist()[1:3]
num2_cat, num2_salesvol = ecom_category.loc[1].tolist()[1:3]
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}})
app = Dash()
app.layout = [
html.Img(src=logo_link),
html.H1('Top Sales Categories'),
dcc.Graph(figure=ecom_bar),
html.Span(children=[
'The top 2 sales categories were:',
# Set up an ordered list
html.____(children=[
# Add two list elements with the top category variables
html.____(children=[____, ' with ', num1_salesvol, ' sales volume']),
html.____(children=[____, ' with ', num2_salesvol, ' sales volume'])
], style={'width':'350px', 'margin':'auto'}),
# Add a line break before the copyright notice
html.____(),
html.I('Copyright E-Com INC')])
]
if __name__ == '__main__':
app.run(debug=True)