開始使用免費開始

切換為 Dark Mode

軟體產品與網頁常見的一種趨勢是提供「Dark Mode」，對眼睛比較不刺激，也有不少人偏好。Dark Mode 指的是元素的背景為黑色，而所有文字顏色為白色。

你的任務是把上一個練習建立的儀表板切換到「暗色系」。這會涉及變更圖表與 HTML 元素的背景與文字顏色。

大部分前一個儀表板的程式都已提供，包含必要圖表的建立。不過，還有關鍵步驟需要你完成，才能把儀表板切換到 Dark Mode。本練習中，你可以直接使用色彩名稱，而不是 RGB 代碼。

本練習屬於課程

使用 Dash 與 Plotly 建立儀表板

檢視課程

練習說明

  • 在第 10 行之後，將長條圖的字型顏色設為符合 Dark Mode（背景為 black、文字為 white）。
  • 在第 16 行之後，使用變數 logo_link 加入新的標誌。

動手互動練習

試著完成這個範例程式碼，體驗一下這個練習。

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)
編輯並執行程式碼