เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

เปลี่ยนเป็น Dark Mode

เทรนด์ยอดนิยมในซอฟต์แวร์และเว็บเพจคือ 'Dark Mode' ซึ่งช่วยลดความเมื่อยล้าของสายตาและเป็นที่ชื่นชอบของหลายคน Dark Mode คือรูปแบบที่พื้นหลังขององค์ประกอบต่าง ๆ เป็นสีดำ และสีข้อความทั้งหมดเป็นสีขาว

งานของคุณคือนำ dashboard ที่สร้างไว้ในแบบฝึกหัดที่แล้วมาปรับเป็น 'ด้านมืด' ซึ่งต้องเปลี่ยนสีพื้นหลังและสีข้อความทั้งในกราฟและ HTML elements

ส่วนใหญ่ของ dashboard จากแบบฝึกหัดที่แล้วได้เตรียมไว้ให้แล้ว รวมถึงการสร้างกราฟที่จำเป็น สิ่งที่ต้องทำคือปรับ dashboard ให้เป็น Dark Mode โดยสามารถใช้ชื่อสีแทน RGB code ได้ในแบบฝึกหัดนี้

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย Dash และ Plotly

ดูคอร์ส

คำแนะนำการฝึกหัด

  • กำหนดสีแบบอักษรของแผนภูมิแท่งให้ตรงกับ Dark Mode ใต้บรรทัดที่ 10 (พื้นหลัง black ข้อความ white)
  • เพิ่มโลโก้ใหม่โดยใช้ตัวแปร logo_link ใต้บรรทัดที่ 16

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด