开始使用免费开始使用

切换到深色模式

许多软件产品和网页都提供"深色模式"，对眼睛更友好，也更受一部分用户偏好。深色模式通常是元素背景为黑色，所有文本为白色。

您的任务是把上一练习中创建的仪表盘切换到"深色风格"。这需要更改图表和 HTML 元素的背景与文本颜色。

我们已为您提供了上一个仪表盘的大部分内容，包括必要图表的创建。不过，要将仪表盘切换为深色模式，还需要您完成关键步骤。本练习中，您可以用颜色名称而不是 RGB 代码。

本练习是课程的一部分

使用 Dash 和 Plotly 构建仪表板

查看课程

练习说明

  • 在第 10 行下方，将条形图的字体颜色设置为符合深色模式（背景为 black，文本为 white）。
  • 在第 16 行下方，使用变量 logo_link 添加新的 Logo。

交互式实操练习

通过完成这段示例代码来试试这个练习。

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/1c95273e21a54b5ca48e0b03cc0c1faeafb3d7cd/e-comlogo_white.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')

# Set the font color of the bar chart
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'black', 'font': {'color':'____'}})

app = Dash()

app.layout = [
    # Add the new logo
    html.Img(
    	src=____,
    	style={'width':'165px', 'height':'50px'}),
    html.H1('Top Sales Categories'),
    dcc.Graph(
    	figure=ecom_bar,
    	style={'width':'500px', 'height':'350px', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I('Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
编辑并运行代码