시작하기무료로 시작하기

HTML과 Dash 결합하기

전자상거래 회사의 데이터를 시각화해 왔고, 이제는 프레젠테이션 수준을 한 단계 높일 때입니다.

이전에 만든 선형 차트와 막대 차트 line_graph와 bar_graph를 하나의 Dash 대시보드에 함께 표시하는 것이 목표예요. 완성도를 높이기 위해 레이아웃 맨 위에 제목도 추가해 보세요.

선형 차트와 막대 차트(line_graph와 bar_graph)는 미리 다시 만들어 두었습니다.

이 연습은 강의의 일부입니다

Dash와 Plotly로 대시보드 만들기

강의 보기

연습 안내

  • Dash 앱에 .H1()로 제목을 추가하고 텍스트는 'Sales by Country & Over Time'로 지정하세요.
  • line_graph와 bar_graph 두 figure를 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)
코드 편집 및 실행