开始使用免费开始使用

使用 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)
编辑并运行代码