Thêm logo và ghi chú
Dù một bức ảnh (hay một biểu đồ!) có thể thay cho cả ngàn lời nói, đôi khi một bảng điều khiển vẫn cần thêm ghi chú giải thích. May mắn là bạn đã luyện được kỹ năng thêm và định dạng văn bản, cũng như chèn hình ảnh và cấu trúc bổ sung cho ứng dụng Dash của mình.
Hãy tạo một bảng điều khiển gồm logo công ty, một biểu đồ, và một vài ghi chú ngắn gọn giải thích.
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 logo công ty bằng
logo_linkURL bên dưới dòng13. - Sau đoạn văn bản đã cho ở dòng
20, thêm biếntop_countryở dạng đậm. - Bên dưới dòng
24, thêm thông báo bản quyền công ty' Copyright E-Com INC'ở dạng nghiêng.
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
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False)
top_country = ecom_bar.loc[0]['Country']
bar_fig_country = px.bar(ecom_bar, x='Total Sales ($)', y='Country', color='Country', color_discrete_map={'United Kingdom':'lightblue', 'Germany':'orange', 'France':'darkblue', 'Australia':'green', 'Hong Kong':'red'})
app = Dash()
app.layout = [
# Add the company logo
html.____(src=____),
html.H1('Sales by Country'),
dcc.Graph(
figure=bar_fig_country,
style={'width':'750px', 'margin':'auto'}),
html.Span(children=[
# Add the top country text
'This year, the most sales came from: ',
html.____(____),
html.Br(),
# Italicize copyright notice
html.____(' Copyright E-Com INC')])
]
if __name__ == '__main__':
app.run(debug=True)