Tạo kiểu cho ứng dụng Dash với CSS
Đến lúc khai thác sức mạnh của CSS để nâng cấp dashboard lên tầm cao mới. Bạn đang nghĩ cách làm mới dashboard marketing đã tạo và có vài ý tưởng muốn trình bày với các bên liên quan trong doanh nghiệp.
Điều chỉnh kích thước biểu đồ và logo, đồng thời thêm màu nền bắt mắt cho một số thành phần sẽ giúp nó nổi bật hơn!
Bài tập này là một phần của khóa học
Xây dựng Dashboard với Dash và Plotly
Hướng dẫn bài tập
- Đặt kích thước logo rộng
215pxvà cao240pxbên dưới dòng16. - Đặt kích thước biểu đồ cột rộng
500pxvà cao350pxbên dưới dòng21. - Thêm màu nền
lightgreycho dòng bản quyền bên dưới dòng30.
Bài tập tương tác thực hành trực tiếp
Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.
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)