Kết hợp HTML và Dash
Bạn đang làm việc với một công ty thương mại điện tử để giúp trực quan hóa dữ liệu của họ, và giờ là lúc nâng tầm phần trình bày.
Mục tiêu của bạn là hiển thị cùng lúc biểu đồ đường và biểu đồ cột bạn đã tạo trước đó, line_graph và bar_graph, trong một dashboard Dash duy nhất. Để giao diện trọn vẹn hơn, bạn cũng sẽ thêm một tiêu đề ở phía trên layout.
Các biểu đồ đường và cột (line_graph và bar_graph) đã được tạo sẵn cho bạ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
- Thêm tiêu đề cho ứng dụng Dash của bạn bằng
.H1()với nội dung'Sales by Country & Over Time'. - Thêm các figure
line_graphvàbar_graphvào layout của ứng dụng Dash.
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 pandas as pd
import plotly.express as px
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby(['Year-Month','Country'])['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
line_graph = px.line(data_frame=ecom_line, x='Year-Month', y='Total Sales ($)', title='Total Sales by Month', color='Country')
bar_graph = px.bar(data_frame=ecom_bar, x='Total Sales ($)', y='Country', orientation='h',title='Total Sales by Country')
app = Dash()
# Set up the layout
app.layout = [
# Add a H1
html.____('____'),
# Add both graphs
dcc.____(id='line_graph', figure=____),
dcc.____(id='bar_graph', figure=____)
]
if __name__ == '__main__':
app.run(debug=True)