BaşlayınÜcretsiz Başlayın

Bir tarih seçici callback'i

Ah hayır! Yine oldu. Oluşturduğun tarih seçici panosu bozulmuş ve callback kodu okunamaz hale gelmiş.

Panoyu tekrar rayına oturtmak için bir tarih seçici bileşenini callback ile nasıl entegre edeceğini hatırlıyor musun?

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

  • Bir callback oluştur ve sale_date bileşenini, 31. satırın altındaki sales_cat grafiğine bağla.
  • Koşullu olarak input_date parametresini kullanarak, 38. satırın altındaki sales DataFrame'inin InvoiceDate sütununu filtrele.
  • bar_fig_major_cat figürünü döndür ve 45. satırın altındaki Dash uygulamasında render edilmesini sağla.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)
Kodu Düzenle ve Çalıştır