การเพิ่มโลโก้และหมายเหตุ
แม้ว่าภาพหนึ่งภาพ (หรือกราฟหนึ่งกราฟ!) จะสื่อความหมายได้มากมาย แต่บางครั้ง Dashboard ก็ต้องการคำอธิบายเพิ่มเติม โชคดีที่คุณได้ฝึกทักษะการเพิ่มและจัดรูปแบบข้อความ รวมถึงการใส่รูปภาพและโครงสร้างต่าง ๆ ลงใน Dash App มาแล้ว
มาสร้าง Dashboard ที่ประกอบด้วยโลโก้บริษัท กราฟหนึ่งกราฟ และหมายเหตุอธิบายสั้น ๆ กัน
แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร
การสร้างแดชบอร์ดด้วย Dash และ Plotly
คำแนะนำการฝึกหัด
- เพิ่มโลโก้บริษัทโดยใช้ URL จาก
logo_linkใต้บรรทัดที่13 - หลังข้อความที่กำหนดในบรรทัดที่
20ให้เพิ่มตัวแปรtop_countryในรูปแบบตัวหนา - ใต้บรรทัดที่
24ให้เพิ่มประกาศลิขสิทธิ์บริษัท' Copyright E-Com INC'ในรูปแบบตัวเอียง
แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ
ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์
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_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False)
top_country = ecom_bar.loc[0]['Country']
bar_fig_country = px.bar(ecom_bar, x='Total Sales ($)', y='Country', color='Country', color_discrete_map={'United Kingdom':'lightblue', 'Germany':'orange', 'France':'darkblue', 'Australia':'green', 'Hong Kong':'red'})
app = Dash()
app.layout = [
# Add the company logo
html.____(src=____),
html.H1('Sales by Country'),
dcc.Graph(
figure=bar_fig_country,
style={'width':'750px', 'margin':'auto'}),
html.Span(children=[
# Add the top country text
'This year, the most sales came from: ',
html.____(____),
html.Br(),
# Italicize copyright notice
html.____(' Copyright E-Com INC')])
]
if __name__ == '__main__':
app.run(debug=True)