更新圖表標題
你所合作的電商公司提出了新挑戰。
他們希望提供一種方式，讓圖表可以依照最終使用者自訂。也就是說，圖表標題應該可設定，讓使用者覺得內容更貼近他們。
這正是使用者輸入元件能發揮作用的地方！
請協助電商公司強化他們的 Dash 應用程式，接受使用者輸入的文字來更新圖表標題。
本練習屬於課程
使用 Dash 與 Plotly 建立儀表板
練習說明
~- 在第 33 行下方加入一個文字輸入元件 dcc.Input，識別碼為 add_user_name。
- 在第 36 行下方設定
debounce參數，讓使用者按下「Enter」時才觸發 callback。 - 在第 38 行下方設定
required參數，讓使用者即使不使用這個輸入欄位，圖表也能正常呈現。
動手互動練習
試著完成這個範例程式碼，體驗一下這個練習。
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)