Bảng số liệu chính tương tác
Dùng biểu đồ để hiển thị dữ liệu là cách tuyệt vời để nhìn nhanh các con số đã được tổng hợp. Tuy vậy, đôi khi bạn cần xem nhiều con số hơn mức mà các dạng trực quan hóa phổ biến có thể hiển thị.
Một bên liên quan quan trọng tại công ty e-commerce, trưởng bộ phận tài chính, đã nghe về công việc xuất sắc của bạn nhưng ông ấy cần xem một số chỉ số dưới dạng bảng thay vì biểu đồ. Ông ấy yêu cầu một bảng điều khiển hiển thị một số thống kê tổng hợp ở dạng bảng. Tuy nhiên, ông cũng tự hỏi liệu bạn có thể thêm một chút 'phép màu Dash' để bảng tương tác hơn so với các bảng tính Excel hiện có của ông ấy không?
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
- Thiết lập đối tượng
money_fmtđể định dạng tiền tệ USD bên dưới dòng9với các tham số hàm và style phù hợp. - Thêm formatter
money_fmtvào cột'Total Sales ($)'trongcolumn_defsbên dưới dòng15.
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, Input, Output, callback
import plotly.express as px
import pandas as pd
from dash_ag_grid import AgGrid
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'
key_stats_tb = ecom_sales.groupby(['Country','Major Category', 'Minor Category'])['OrderValue'].agg(['sum', 'count', 'mean']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)', 'mean':'Average Order Value ($)'})
# Set up the money object
money_fmt = {
"____": (
"""params.value.toLocaleString(
'en-US', {style: '____', currency: '____'})""")}
# Add the formatter to the relevant column
column_defs = [
{"field": "Major Category"},
{"field": "Total Sales ($)", "____": ____},
{"field": "Average Order Value ($)"},
{"field": "Sales Volume"}]
grid = AgGrid(
columnDefs=column_defs,
rowData=key_stats_tb.to_dict("records"))
app = Dash()
app.layout = [
html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
html.H1('Sales Aggregations'),
html.Div([
html.H2('Key Aggregations'),
grid],
style={'width':'850px', 'height':'750px', 'margin':'0 auto'})
]
if __name__ == '__main__':
app.run(debug=True)