시작하기무료로 시작하기

CSS로 Dash 앱 스타일링하기

이제 CSS의 힘을 발휘해 대시보드를 한 단계 업그레이드해 볼까요? 여러분은 만든 마케팅 대시보드를 더 돋보이게 만들 방법을 고민해 왔고, 비즈니스 이해관계자에게 보여 줄 몇 가지 아이디어가 있습니다.

그래프와 로고의 크기를 조정하고, 여러 요소에 어울리는 배경색을 더하면 훨씬 생동감 있게 꾸밀 수 있어요!

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

Dash와 Plotly로 대시보드 만들기

강의 보기

연습 안내

  • 16번째 줄 아래에서 로고 크기를 가로 215px, 세로 240px로 설정하세요.
  • 21번째 줄 아래에서 막대 그래프 크기를 가로 500px, 세로 350px로 설정하세요.
  • 30번째 줄 아래에서 저작권 문구에 lightgrey 배경색을 추가하세요.

실습형 인터랙티브 연습

이 예제를 이 샘플 코드를 완성하여 풀어보세요.

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/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
top_cat = ecom_category.loc[0]['Minor Category']
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})         

app = Dash()

app.layout = [
    html.Img(
    	src=logo_link,
    	# Set the size of the logo
    	style={'____':'____', '____':'____'}), 
    html.H1('Top Sales Categories'),
	dcc.Graph(
		figure=ecom_bar,
        # Set the size of the bar graph
		style={'____':'____', '____':'____', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I(
		'Copyright E-Com INC',
    	# Add a background color to the copyright notice
    	style={'____':'____'})])
    ]

if __name__ == '__main__':
    app.run(debug=True)
코드 편집 및 실행