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

Поєднання HTML і Dash

Ви працювали з компанією електронної комерції, щоб візуалізувати їхні дані, і тепер час покращити подання результатів.

Ваша мета — відобразити лінійний і стовпчиковий графіки, які ви створили раніше, line_graph і bar_graph, разом в одному dashboard на Dash. Щоб усе виглядало завершено, ви також додасте заголовок у верхній частині макета.

Лінійний і стовпчиковий графіки (line_graph і bar_graph) для вас відтворено.

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

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

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

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

  • Додайте заголовок до свого застосунку Dash як .H1() із текстом 'Sales by Country & Over Time'.
  • Додайте фігури line_graph і bar_graph до макета застосунку Dash.

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

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

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