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

Bir grafik başlığını güncelleme

Birlikte çalıştığın e-ticaret şirketinin senin için yeni bir görevi var.

Kullanıcıya özel grafikler sunmak istiyorlar. Yani, grafiğin başlığı son kullanıcı tarafından ayarlanabilir olmalı ki kendilerine göre kişiselleştirilmiş hissetsinler.

Bu tam bir kullanıcı girişi bileşeni işi gibi duruyor!

Metin girdisi alarak grafik başlığını güncelleyen bir özellik ekleyip e-ticaret şirketinin Dash uygulamasını geliştirmesine yardımcı ol.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

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

Egzersiz talimatları

~- 33. satırın altına, kimliği add_user_name olan dcc.Input adlı bir metin girişi bileşeni ekle.

  • 36. satırın altına, geri çağrının kullanıcı 'Enter'a bastığında tetiklenmesi için debounce parametresini ayarla.
  • 38. satırın altına, grafiğin çizilmesi için bu girdinin zorunlu olmaması adına required parametresini ayarla.

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'

def make_break(num_breaks):
    br_list = [html.Br()] * num_breaks
    return br_list

def add_logo():
    corp_logo = html.Img(
        src=logo_link, 
        style={'width':'75px','margin':'20px 20px 5px 5px','border':'1px dashed lightblue','display':'inline-block'})
    return corp_logo

def style_c():
    layout_style={'display':'inline-block','margin':'0 auto','padding':'20px'}
    return layout_style
  
app = Dash()

app.layout = [
  add_logo(),
  *make_break(2),
  html.H1('Sales Dashboard'),
  *make_break(3),         
  html.Div([
    html.H2('Controls', style=style_c()),
    html.H3('Customize plot title'),
    *make_break(2),
    # Add a text input
    dcc.____(id='add_user_name', type='____', 
      placeholder='Enter your name',
      # Ensure input is triggered with 'Enter'
      ____=____,
      # Ensure the plot can load without a selection
      ____=____,
      style={'width':'200px', 'height':'30px'})],
    style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
           'display':'inline-block', 'margin':'0px 80px'}),
  html.Div([
    dcc.Graph(id='sales_plot'),
    html.H2('Sales Quantity by Country', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
    style={'width':'500px','display':'inline-block'})       
]

@callback(
    Output(component_id='sales_plot', component_property='figure'),
    Input(component_id='add_user_name', component_property='value')
)
def update_plot(entered_name):
    title_value = 'No Name Entered'
    sales = ecom_sales.copy(deep=True)
    if entered_name:
      title_value = entered_name
    fig = px.scatter(data_frame=sales, 
                    y='OrderValue', x='Quantity', color='Country',title=f'Plot generated for: {title_value}')
    return fig

if __name__ == '__main__':
    app.run(debug=True)
Kodu Düzenle ve Çalıştır