Dash AG Grid 互動性

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

設定所有 AG Grid 儲存格樣式

 

  • 不能用 style ❌
  • 請改用 cellStyle ✅
grid = AgGrid(
defaultColDef={
    "cellStyle": 
    {"textAlign": "right"}}
)

 

上一單元表格的前兩欄，標題為「Major Category」與「Total Sales ($)」，共四列資料。所有儲存格內容皆靠右對齊。

使用 Dash 與 Plotly 建立儀表板

設定部分 AG Grid 儲存格樣式

 

column_defs = [
{"field": "Major Category"
, "cellStyle": {"textAlign": "center"}},
{"field": "Total Sales ($)"
, "valueFormatter": money_fmt
, "cellStyle": {"textAlign": "right"}}
]

 

與前一張相同的表格；但「Major Category」此欄文字置中，「Total Sales ($)」此欄文字靠右。

使用 Dash 與 Plotly 建立儀表板

更多樣式範例

 

  • 可用其他 CSS 設定樣式 ✨
grid = AgGrid(
# Other setup
defaultColDef={
"cellStyle": {
  "backgroundColor": "black",
   "color": "white"}
})

 

$$

與前一張相同的表格，但儲存格底色為黑色、文字為白色。

使用 Dash 與 Plotly 建立儀表板

選取儲存格

$$

  • 使用 cellClicked 屬性
  • 設定回呼以印出被點選儲存格的資訊
@callback(
    Output("test_text", "children"),
    Input("my_grid", "cellClicked")
)
def show_cell_info(cell_data):
    return str(cell_data)

 

同一個表格的動態圖。表格下方有一個字典，點選儲存格後會即時更新該儲存格的詳細資訊。

使用 Dash 與 Plotly 建立儀表板

選取列

  • 將 rowSelection 設為 "single" 或 "multiple"
grid = AgGrid(
# Other parts
dashGridOptions={
"rowSelection": "single"}
)

@callback(
Output("test_text", "children"),
Input("my_grid", "selectedRows")
)

 

同一個表格的動態圖。表格下方是灰底文字區，當選取整列時會更新並顯示該列的字典資料。

使用 Dash 與 Plotly 建立儀表板

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板

Preparing Video For Download...