Zacznij terazZacznij za darmo

Kontrolowanie układu obiektów

Twoja praca z Dashem przynosi realne efekty w organizacji. Jeden z kolegów zgłosił się do ciebie z problemem dotyczącym swojego dashboardu. Docelowy wygląd zakłada logo firmy u góry, a pod nim dwa wykresy słupkowe umieszczone obok siebie.

Niestety logo jest zbyt blisko górnej krawędzi, a wykresy są ułożone jeden pod drugim. Istny bałagan!

Na szczęście znajomość CSS powinna pozwolić ci uporządkować te elementy.

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Dodaj margines 30px tylko od góry logo poniżej linii 15, pozostawiając pozostałe strony bez marginesu.
  • Dodaj styl do obu wykresów poniżej linii 19, tak aby wyświetlały się obok siebie.

Interaktywne ćwiczenie praktyczne

Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.

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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')                    

app = Dash()

app.layout = [
	html.Img(src=logo_link,
		# Add margin to the logo
		style={'margin':'____ ____ ____ ____'}),
	html.H1('Sales breakdowns'),
	dcc.Graph(
		# Style the graphs to appear side-by-side
		figure=bar_fig_major_cat,
		style={'display':'____', 'width': '49%'}),
	dcc.Graph(
		figure=bar_fig_minor_cat,
		style={'display':'____', 'width': '49%'}), 
  ]

if __name__ == '__main__':
    app.run(debug=True)
Edytuj i uruchom kod