日期選擇器的回呼函式
糟糕！又發生了。你建立的日期選擇器儀表板被破壞了，回呼函式的程式碼也看不懂了。
你能回想如何把日期選擇器元件和回呼函式整合，讓儀表板重新正常運作嗎？
本練習屬於課程
使用 Dash 與 Plotly 建立儀表板
練習說明
- 建立一個回呼函式，並在第 31 行之後把
sale_date元件連結到sales_cat圖表。 - 在第 38 行之後，條件式地使用參數
input_date來篩選salesDataFrame 的InvoiceDate欄位。 - 在第 45 行之後回傳
bar_fig_major_cat圖形，讓它在 Dash 應用中渲染。
動手互動練習
試著完成這個範例程式碼，體驗一下這個練習。
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from datetime import datetime, date
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_sales['InvoiceDate'] = pd.to_datetime(ecom_sales['InvoiceDate'])
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('Sale Date Select'),
dcc.DatePickerSingle(
id='sale_date',
min_date_allowed=ecom_sales['InvoiceDate'].min(),
max_date_allowed=ecom_sales['InvoiceDate'].max(),
date=date(2011, 4, 11),
initial_visible_month=date(2011, 4, 11),
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='sales_cat'),
html.H2('Daily Sales by Major Category', style={'border': '2px solid black', 'width': '400px', 'margin': '0 auto'})],
style={'width': '700px', 'display': 'inline-block'})
]
# Create a callback and link
@callback(
____(component_id='____', component_property='____'),
____(component_id='____', component_property='____')
)
def update_plot(input_date):
sales = ecom_sales.copy(deep=True)
# Conditionally filter the DataFrame using the input
if ____:
sales = sales[sales['InvoiceDate'] == input_date]
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 on: {input_date}', data_frame=ecom_bar_major_cat, orientation='h',
x='Total Sales ($)', y='Major Category')
# Return the figure to render
return ____
if __name__ == '__main__':
app.run(debug=True)