Thêm danh sách HTML vào Dash
Trong lúc bạn đang làm việc, một người từ bộ phận Marketing đã thấy dashboard nhỏ bạn vừa tạo và nhờ bạn làm một phiên bản cho họ. Họ muốn một biểu đồ cột hiển thị các danh mục đứng đầu theo tổng doanh số, kèm một danh sách bên dưới để liệt kê vài danh mục top giúp xem nhanh.
Họ cũng có một vài yêu cầu về phong cách, nhưng tất cả đều nằm trong khả năng của bạn nhờ kiến thức HTML và Dash gần đây.
Nhiệm vụ của bạn là mở rộng dashboard đã tạo để bao gồm danh sách các danh mục hàng đầu và doanh số của chúng.
Bài tập này là một phần của khóa học
Xây dựng Dashboard với Dash và Plotly
Hướng dẫn bài tập
- Tạo một danh sách có thứ tự bên dưới dòng
20bằng Dash. - Thêm hai phần tử danh sách chứa các biến
num1_catvànum2_catcùng doanh số của chúng vào danh sách có thứ tự bên dưới dòng22. - Thêm một ngắt dòng bên dưới dòng
26để dòng thông báo bản quyền hiển thị riêng một dòng.
Bài tập tương tác thực hành trực tiếp
Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.
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)