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

Etkileşimli önemli istatistikler tablosu

Verilerini grafiklerle görselleştirmek, toplu rakamları bir bakışta görmek için harika bir yöntemdir. Yine de bazen, yaygın görselleştirme biçimlerinde gösterilmesi pek mümkün olmayan daha fazla sayıyı da görmen gerekir.

E-ticaret şirketindeki kilit paydaşlardan biri olan finans departmanı başkanı, çalışmalarını duymuş ama görsel format yerine bazı rakamları tablo halinde görmesi gereken biri. Tablo biçiminde bazı toplu istatistikleri gösteren bir gösterge paneli talep etti. Ancak, mevcut Excel tablolarından biraz daha etkileşimli hale getirmek için biraz 'Dash sihri' de ekleyip ekleyemeyeceğini merak ediyor.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

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

Egzersiz talimatları

  • Satır 9 altına, uygun fonksiyon ve stil parametrelerini kullanarak USD para birimi biçimlendirmesi için money_fmt nesnesini ayarla.
  • Satır 15 altındaki column_defs içinde 'Total Sales ($)' sütununa money_fmt biçimlendiricisini ekle.

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

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