ÎncepețiÎncepe gratuit

Adăugarea de logo-uri și note

Deși o imagine (sau un grafic!) face cât o mie de cuvinte, uneori un dashboard are nevoie și de note explicative. Din fericire, ai exersat deja cum să adaugi și să formatezi text, imagini și alte elemente de structură în aplicațiile Dash.

Hai să creăm un dashboard care include logo-ul companiei, un singur grafic și câteva note explicative concise.

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu Dash și Plotly

Vezi cursul

Instrucțiuni pentru exercițiu

  • Adaugă logo-ul companiei folosind URL-ul logo_link, după linia 13.
  • După textul existent de pe linia 20, adaugă variabila top_country cu text îngroșat.
  • Sub linia 24, adaugă nota de copyright a companiei ' Copyright E-Com INC' în italic.

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul