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

Adding logos and notes

While a picture (or a graph!) is worth a thousand words, sometimes a dashboard needs more explanatory notes. Luckily, you have been working on your skills to add and format text, as well as images and further structure to your Dash apps.

Let's create a dashboard that includes the company logo, a single graph, and some brief explanatory notes.

Bài tập này là một phần của khóa học

Building Dashboards with Dash and Plotly

Xem khóa học

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

  • Add the company logo using the logo_link URL below line 13.
  • After the provided text on line 20, add the top_country variable in bold.
  • Below line 24, add the company copyright notice ' Copyright E-Com INC' in italics.

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ã