Cập nhật tiêu đề biểu đồ
Công ty thương mại điện tử bạn đang hợp tác có một thử thách mới cho bạn.
Họ muốn cung cấp cách để tùy biến biểu đồ theo người dùng cuối. Cụ thể, tiêu đề của biểu đồ cần có thể cấu hình được để người dùng cảm thấy nó được cá nhân hóa cho họ.
Đây nghe có vẻ là việc của một thành phần nhập liệu từ người dùng!
Hãy giúp công ty nâng cấp ứng dụng Dash bằng cách nhận văn bản người dùng nhập vào để cập nhật tiêu đề biểu đồ.
Bài tập này là một phần của khóa học
Xây dựng Dashboard với Dash và Plotly
Hướng dẫn bài tập
~- Thêm một thành phần nhập văn bản dcc.Input với định danh add_user_name bên dưới dòng 33.
- Đặt tham số
debounceđể callback được kích hoạt khi người dùng nhấn 'Enter' bên dưới dòng36. - Đặt tham số
requiredđể người dùng không bắt buộc phải dùng input này mà biểu đồ vẫn hiển thị, bên dưới dòng38.
Bài tập tương tác thực hành trực tiếp
Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.
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)