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

Dropdown cho doanh số theo quốc gia

Khi bạn đang làm việc tại bàn, quản lý bán hàng toàn cầu của công ty e-commerce ghé qua với một thử thách mới. Cô ấy rất thích các biểu đồ doanh số gần đây bạn tạo, nhưng muốn lọc theo quốc gia và xem dữ liệu danh mục cập nhật theo thời gian thực.

Cô ấy nhấn mạnh cần dùng các tên quốc gia đã phê duyệt: United Kingdom, Germany, France, Australia và Hong Kong.

🛑 Lưu ý: Bạn có thể cần bật chế độ Toàn màn hình để xem dashboard đúng với tất cả thành phần hiển thị cạnh nhau.

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

  • Thêm một thành phần dropdown dcc.Dropdown với định danh country_dd bên dưới dòng 16 để dùng trong callback.
  • Thiết lập phần vào (input) và ra (output) của callback bên dưới dòng 30 để kết nối dropdown country_dd với biểu đồ major_cat.

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, Input, Output, callback
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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'

app = Dash()

app.layout = [
    html.Img(src=logo_link, style={'margin': '30px 0px 0px 0px'}),
    html.H1('Sales breakdowns'),
    html.Div([
        html.H2('Controls'),
        html.Br(),
        html.H3('Country Select'),
        # Add a dropdown with identifier
        dcc.____(
            ____='country_dd',
            options=['United Kingdom', 'Germany', 'France', 'Australia', 'Hong Kong'],
            style={'width': '200px', 'margin': '0 auto'})],
      	style={'width': '350px', 'height': '350px', 'display': 'inline-block', 'vertical-align': 'top', 'border': '1px solid black', 'padding': '20px'}),
    html.Div([
        dcc.Graph(id='major_cat'),
        html.H2('Major Category', style={'border': '2px solid black', 'width': '200px', 'margin': '0 auto'})],
        style={'width': '700px', 'display': 'inline-block'})
]


@callback(
    # Set the input and output of the callback to link the dropdown to the graph
    ____(component_id='____', component_property='____'),
    ____(component_id='____', component_property='____')
)

def update_plot(input_country):
    country_filter = 'All Countries'
    sales = ecom_sales.copy(deep=True)
    if input_country:
        country_filter = input_country
        sales = sales[sales['Country'] == country_filter]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    bar_fig_major_cat = px.bar(
        title=f'Sales in {country_filter}', data_frame=ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category',
                 color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
    return bar_fig_major_cat


if __name__ == '__main__':
    app.run(debug=True)
Chỉnh sửa và Chạy Mã