เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

Callback สำหรับตัวเลือกวันที่

เกิดเหตุการณ์ไม่คาดฝันอีกครั้ง! แดชบอร์ดตัวเลือกวันที่ที่สร้างไว้เกิดความเสียหาย และโค้ด callback อ่านไม่ออก

ลองนึกดูว่าจะเชื่อมต่อคอมโพเนนต์ตัวเลือกวันที่กับ callback เพื่อกู้แดชบอร์ดกลับมาได้อย่างไร

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย Dash และ Plotly

ดูคอร์ส

คำแนะนำการฝึกหัด

  • สร้าง callback และเชื่อมต่อคอมโพเนนต์ sale_date กับกราฟ sales_cat ใต้บรรทัดที่ 31
  • ใช้พารามิเตอร์ input_date แบบมีเงื่อนไขเพื่อกรองคอลัมน์ InvoiceDate ของ DataFrame sales ใต้บรรทัดที่ 38
  • คืนค่า figure bar_fig_major_cat เพื่อแสดงผลใน Dash app ใต้บรรทัดที่ 45

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด