Di chuột để cập nhật biểu đồ khác
Công ty thương mại điện tử toàn cầu rất thích sự đổi mới và luồng sinh khí mà công việc của bạn đang thổi vào những báo cáo cũ kỹ của họ. Vị quản lý mà bạn vừa xây dựng bảng điều khiển hover cho các chỉ số chính đã gửi tới bạn một thử thách mới. Dù những con chữ cho một bức tranh tổng quan tốt, nhưng một bức hình đáng giá ngàn lời nói! Quản lý đề nghị bạn tạo các biểu đồ hiển thị những tập con khác nhau tùy vào nơi đang được di chuột (hover).
Kinh nghiệm trước đây của bạn với việc dùng callbacks để lọc dữ liệu và dựng lại hình, kết hợp với công việc gần đây về callback kích hoạt bởi hover, chính là bộ đôi hoàn hảo cho yêu cầu này.
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 callback để cập nhật biểu đồ
minor_catkhi di chuột trên biểu đồscatterbên dưới dòng26. - Tạo một callback để cập nhật biểu đồ
major_catkhi di chuột trên biểu đồscatterbên dưới dòng41.
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'
ecom_country = ecom_sales.groupby('Country')['OrderValue'].agg(['sum', 'count']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)'})
ecom_scatter = px.scatter(ecom_country, x='Total Sales ($)', y='Sales Volume', color='Country', width=350, height=550, custom_data=['Country'])
ecom_scatter.update_layout({'legend':dict(orientation='h', y=-0.7,x=1, yanchor='bottom', xanchor='right')})
app = Dash()
app.layout = [
html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px' }),
html.H1('Sales breakdowns'),
html.Div([
html.H3('Sales Volume vs Sales Amount by Country'),
dcc.Graph(id='scatter', figure=ecom_scatter)],
style={'width':'350px', 'height':'650px', 'display':'inline-block',
'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
html.Div([
dcc.Graph(id='major_cat'),
dcc.Graph(id='minor_cat')],
style={'width':'700px', 'height':'650px','display':'inline-block'})
]
# Create a callback to update the minor category plot
@callback(
Output('____', '____'),
Input('scatter', '____'))
def update_min_cat_hover(hoverData):
hover_country = 'Australia'
if hoverData:
hover_country = hoverData['points'][0]['customdata'][0]
minor_cat_df = ecom_sales[ecom_sales['Country'] == hover_country]
minor_cat_agg = minor_cat_df.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = px.bar(minor_cat_agg, x='Total Sales ($)', y='Minor Category', orientation='h', height=450, title=f'Sales by Minor Category for: {hover_country}')
ecom_bar_minor_cat.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'title':{'x':0.5}})
return ecom_bar_minor_cat
# Create a callback to update the major category plot
@callback(
Output('____', '____'),
Input('scatter', '____'))
def update_major_cat_hover(hoverData):
hover_country = 'Australia'
if hoverData:
hover_country = hoverData['points'][0]['customdata'][0]
major_cat_df = ecom_sales[ecom_sales['Country'] == hover_country]
major_cat_agg = major_cat_df.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_major_cat = px.bar(major_cat_agg, x='Total Sales ($)',
y='Major Category', height=300,
title=f'Sales by Major Category for: {hover_country}', color='Major Category',
color_discrete_map={'Clothes':'blue','Kitchen':'red', 'Garden':'green', 'Household':'yellow'})
ecom_bar_major_cat.update_layout({'margin':dict(l=10,r=15,t=40,b=0), 'title':{'x':0.5}})
return ecom_bar_major_cat
if __name__ == '__main__':
app.run(debug=True)