Bắt đầu ngayBắt đầu miễn phí

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

Xem khóa học

Hướng dẫn bài tập

  • Tạo một danh sách có thứ tự bên dưới dòng 20 bằng Dash.
  • Thêm hai phần tử danh sách chứa các biến num1_cat và num2_cat cùng doanh số của chúng vào danh sách có thứ tự bên dưới dòng 22.
  • 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)
Chỉnh sửa và Chạy Mã