ПочатиПочніть безкоштовно

Додавання логотипів і приміток

Хоча зображення (або графік!) інколи промовистіші за тисячу слів, буває, що на панелі потрібні додаткові пояснення. На щастя, ви вже відпрацьовуєте навички додавання й форматування тексту, а також зображень і структури у своїх застосунках Dash.

Створімо дашборд, який містить логотип компанії, один графік і короткі пояснювальні примітки.

Ця вправа є частиною курсу

Створення дашбордів з Dash і Plotly

Переглянути курс

Інструкції до вправи

  • Додайте логотип компанії, використовуючи URL logo_link нижче рядка 13.
  • Після наданого тексту в рядку 20 додайте змінну top_country напівжирним шрифтом (bold).
  • Нижче рядка 24 додайте повідомлення про авторські права компанії ' Copyright E-Com INC' курсивом (italics).

Інтерактивна практична вправа

Спробуйте виконати цю вправу, доповнивши цей зразок коду.

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)
Редагувати та запускати код