Bắt đầu ngayBắt đầu miễn phí

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

Xem khóa học

Hướng dẫn bài tập

  • Thêm logo công ty bằng logo_link URL bên dưới dòng 13.
  • Sau đoạn văn bản đã cho ở dòng 20, thêm biến top_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)
Chỉnh sửa và Chạy Mã