Bắt đầu ngayBắt đầu miễn phí

Một bảng điều khiển bán hàng được trau chuốt

Công ty thương mại điện tử ở Chương 1 đã liên hệ lại và có ngân sách để bạn mở rộng phần công việc trước đó: xây dựng một bảng điều khiển bán hàng dạng bằng chứng ý tưởng (proof-of-concept) cơ bản.

Giờ đây, khi bạn đã rèn luyện kỹ năng tạo kiểu và bố cục, bạn có thể biến bảng điều khiển này trở nên sẵn sàng để trình bày.

Nhắc lại, công ty muốn có biểu đồ đường thể hiện tổng doanh số theo từng tháng, biểu đồ cột thể hiện tổng doanh số theo từng quốc gia, và một thống kê tóm tắt cấp cao về lượng đặt hàng lớn nhất trong giai đoạn. Tuy nhiên, họ muốn các biểu đồ này đặt cạnh nhau, và cẩm nang nhận diện thương hiệu yêu cầu nền xanh nhạt. Họ cũng muốn có hai logo, mỗi logo ở một bên tiêu đề chính, để thương hiệu được nổi bật.

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

Xem khóa học

Hướng dẫn bài tập

  • Thêm logo bên trái cạnh H1 với 25px margin bên dưới dòng 17.
  • Thêm logo bên phải cạnh H1 với 25px margin bên dưới dòng 22.
  • Đặt biểu đồ đường rộng 500px, hiển thị cạnh nhau với 5px margin bên dưới dòng 25.
  • Đặt biểu đồ cột rộng 350px, hiển thị cạnh nhau với 5px margin bên dưới dòng 28.

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
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='TotalSales')
line_fig = px.line(data_frame=ecom_line, x='Year-Month', y='TotalSales',title='Total Sales by Month')
line_fig.update_layout({'paper_bgcolor':'rgb(224, 255, 252)' }) 
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='TotalSales')
bar_fig = px.bar(data_frame=ecom_bar, x='TotalSales', y='Country', orientation='h',title='Total Sales by Country')
bar_fig.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'}) 

app = Dash()

app.layout = [
	html.Img(src=logo_link, 
		# Add the left-side logo next to the H1 with 25px margin
		style={'display':'____', 'margin':'____'}),
	html.H1(children=['Sales Figures'],
		style={'display':'inline-block'}),
	html.Img(src=logo_link,
		# Add the right-side logo next to the H1 with 25px margin
		style={'display':'____', 'margin':'____'}),
	dcc.Graph(figure=line_fig, 
		# Set line graph to 500px wide, side-by-side with 5px margin
		style={'width':'____', 'display':'____', 'margin':'____'}), 
	dcc.Graph(figure=bar_fig,
		# Set bar graph to 350px wide, side-by-side with 5px margin
		style={'width':'____', 'display':'____', 'margin':'____'}), 
	html.H3(f'The largest order quantity was {ecom_sales.Quantity.max()}')
	]

if __name__ == '__main__':
    app.run(debug=True)
Chỉnh sửa và Chạy Mã