BaşlayınÜcretsiz Başlayın

Önemli istatistikler tablosunu biçimlendirme

Finans departmanı müdürü, daha önce onun için oluşturduğun önemli istatistikler tablosunu çok beğendi. Ancak büyük bir Excel hayranı olduğu için, tabloda biraz ek biçimlendirme talep etti.

Özel olarak istediği şeyler:

  • Tüm hücre içerikleri sola hizalansın.
  • Hücrelerin arka planı siyah ve yazı rengi beyaz olsun.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

  • Aşağıda, 23 numaralı satırın altında defaultColDef içindeki cellStyle parametresini kullanarak tüm hücrelere stil uygula.
  • 25 numaralı satırın altında textAlign özelliğini kullanarak hücreleri sola hizala.
  • 27 numaralı satırın altında backgroundColor ve color özelliklerini kullanarak hücrelere siyah arka plan ve beyaz metin uygula.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)
Kodu Düzenle ve Çalıştır