Kiểm soát bố cục đối tượng
Công việc của bạn với Dash đang tạo ra ảnh hưởng lớn trong tổ chức. Tuy nhiên, một đồng nghiệp đã liên hệ về sự cố họ gặp phải với một trong các bảng điều khiển. Bảng điều khiển họ hình dung có logo công ty ở trên cùng, tiếp theo là hai biểu đồ cột đặt cạnh nhau.
Nhưng logo lại quá sát mép trên, và các biểu đồ thì chồng lên nhau theo chiều dọc. Thật lộn xộn!
Bạn nghĩ mình có thể dùng kiến thức CSS để đưa các đối tượng này vào đúng vị trí.
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
- Thêm
30pxmargin cho chỉ phần trên của logo bên dưới dòng15và để các cạnh còn lại không có margin. - Thêm phần style cho cả hai biểu đồ bên dưới dòng
19để chúng hiển thị cạnh nhau.
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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')
app = Dash()
app.layout = [
html.Img(src=logo_link,
# Add margin to the logo
style={'margin':'____ ____ ____ ____'}),
html.H1('Sales breakdowns'),
dcc.Graph(
# Style the graphs to appear side-by-side
figure=bar_fig_major_cat,
style={'display':'____', 'width': '49%'}),
dcc.Graph(
figure=bar_fig_minor_cat,
style={'display':'____', 'width': '49%'}),
]
if __name__ == '__main__':
app.run(debug=True)