LoslegenKostenlos starten

HTML und Dash kombinieren

Du arbeitest mit einem E‑Commerce-Unternehmen zusammen, um dessen Daten zu visualisieren, und jetzt ist es Zeit, die Präsentation aufzuwerten.

Dein Ziel ist es, die zuvor erstellten Linien- und Balkendiagramme, line_graph und bar_graph, gemeinsam in einem einzigen Dash-Dashboard anzuzeigen. Damit das Ganze vollständig wirkt, fügst du außerdem einen Titel oben im Layout hinzu.

Die Linien- und Balkendiagramme (line_graph und bar_graph) wurden für dich neu erstellt.

Diese Übung ist Teil des Kurses

<Kurs>Dashboards mit Dash und Plotly erstellen</Kurs>
Kurs ansehen

Übungsanweisungen

  • Füge deiner Dash-App einen Titel als .H1() mit dem Text 'Sales by Country & Over Time' hinzu.
  • Füge die line_graph- und bar_graph-Abbildungen dem Layout der Dash-App hinzu.

Interaktive praktische Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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)
Code bearbeiten und ausführen