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(
# 其他设置
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(
# 其他部分
dashGridOptions={
"rowSelection": "single"}
)

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

 

与前面相同的表格。表格下方是灰色文本区，选择一行后会更新该行的字典。

使用 Dash 和 Plotly 构建仪表板

Passons à la pratique !

使用 Dash 和 Plotly 构建仪表板

Preparing Video For Download...