Kom igångKom igång gratis

Kombinera HTML och Dash

Du har samarbetat med ett e-handelsföretag för att visualisera deras data, och nu är det dags att lyfta presentationen ytterligare.

Målet är att visa linje- och stapeldiagrammen du skapade tidigare, line_graph och bar_graph, tillsammans i en och samma Dash-dashboard. För att ge den ett färdigt intryck lägger du också till en rubrik längst upp i layouten.

Linje- och stapeldiagrammen (line_graph och bar_graph) har redan skapats åt dig.

Den här övningen är en del av kursen

Bygg dashboards med Dash och Plotly

Visa kurs

Övningsinstruktioner

  • Lägg till en rubrik i din Dash-app som ett .H1()-element med texten 'Sales by Country & Over Time'.
  • Lägg till figurerna line_graph och bar_graph i Dash-appens layout.

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

from dash import Dash, dcc, html
import pandas as pd
import plotly.express as px
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby(['Year-Month','Country'])['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
line_graph = px.line(data_frame=ecom_line, x='Year-Month', y='Total Sales ($)', title='Total Sales by Month', color='Country')
bar_graph = px.bar(data_frame=ecom_bar, x='Total Sales ($)', y='Country', orientation='h',title='Total Sales by Country')

app = Dash()

# Set up the layout
app.layout = [
  # Add a H1
  html.____('____'),
  # Add both graphs
  dcc.____(id='line_graph', figure=____),
  dcc.____(id='bar_graph', figure=____)
  ]

if __name__ == '__main__':
    app.run(debug=True)
Redigera och kör kod