เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

การจัดสไตล์ตารางสถิติสำคัญ

หัวหน้าฝ่ายการเงินประทับใจตารางสถิติสำคัญที่สร้างไว้ก่อนหน้ามาก อย่างไรก็ตาม เนื่องจากเป็นแฟนตัวยงของ Excel เขาจึงขอให้จัดรูปแบบตารางเพิ่มเติม

โดยเฉพาะคือ:

  • เนื้อหาในทุกเซลล์ควรจัดชิดซ้าย
  • พื้นหลังของเซลล์ควรเป็นสีดำและข้อความเป็นสีขาว

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย Dash และ Plotly

ดูคอร์ส

คำแนะนำการฝึกหัด

  • กำหนดสไตล์ให้กับทุกเซลล์โดยใช้พารามิเตอร์ cellStyle ใน defaultColDef ใต้บรรทัดที่ 23
  • จัดข้อความในเซลล์ให้ชิดซ้ายโดยใช้คุณสมบัติ textAlign ใต้บรรทัดที่ 25
  • กำหนดสไตล์เซลล์ให้มีพื้นหลังสีดำและข้อความสีขาวโดยใช้คุณสมบัติ backgroundColor และ color ใต้บรรทัดที่ 27

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด