開始使用免費開始

為重點統計表加入分頁

上一堂課建立的重點統計表，對這家全球電商公司的分析工具箱來說非常受用。不過，它實在太長了！

我們來用 Dash AG Grid 內建的分頁選項來改善。這會大幅提升應用程式的可用性，讓使用者能依需求探索資料的不同區段。

本練習屬於課程

使用 Dash 與 Plotly 建立儀表板

檢視課程

練習說明

  • 在第 21 行下方，使用 AgGrid 建立名為 grid 的 Dash AG Grid 物件。
  • 在第 25 行下方，將 pagination 參數打開，為 grid 啟用分頁。
  • 在第 28 行下方，將 paginationPageSize 參數設為 7，限制每頁顯示 7 列。

動手互動練習

試著完成這個範例程式碼，體驗一下這個練習。

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": "Major Category"},
  {"field": "Total Sales ($)", "valueFormatter": money_fmt},
  {"field": "Average Order Value ($)", "valueFormatter": money_fmt},
  {"field": "Sales Volume"}
]

# Create a grid
grid = ____(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"),
  # Turn on pagination
  dashGridOptions={
    "____": ____,        
    # Show 7 rows per page
    "____": ____}
)

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)
編輯並執行程式碼