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

Tạo kiểu cho bảng số liệu chính

Trưởng bộ phận tài chính rất thích bảng số liệu chính mà bạn đã tạo trước đó. Tuy nhiên, vì là một người dùng Excel lâu năm, anh ấy muốn bổ sung một số định dạng cho bảng.

Cụ thể, anh ấy yêu cầu:

  • Tất cả nội dung trong ô phải canh trái.
  • Nền của các ô phải là màu đen với chữ màu trắ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

Xem khóa học

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

  • Áp dụng kiểu cho tất cả các ô bằng tham số cellStyle trong defaultColDef bên dưới dòng 23.
  • Tạo kiểu để các ô được canh trái bằng thuộc tính textAlign bên dưới dòng 25.
  • Tạo kiểu cho các ô với nền đen và chữ trắng bằng các thuộc tính backgroundColor và color bên dưới dòng 27.

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 ($)'})

money_fmt = {"function": ("params.value.toLocaleString('en-US', {style: 'currency', currency: 'USD'})")}
column_defs = [
  {"field": "Country"},
  {"field": "Major Category"},
  {"field": "Minor Category"},
  {"field": "Total Sales ($)", "valueFormatter": money_fmt},
  {"field": "Average Order Value ($)", "valueFormatter": money_fmt},
  {"field": "Sales Volume"},
]

grid = AgGrid(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"),
  defaultColDef={
    # Apply styling to all cells
    "____": {
      # Style content aligned left
      "____": "____",
      # Style background color and text color
      "____": "____",
      "____": "____"}}
)

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)
Chỉnh sửa và Chạy Mã