Plotly Dash：根据绘图选择过滤 DataTable

Question

我有一个显示 Pandas DataFrame 的 Plotty DataTable。 DataFrame 的数据框中的每一列都有一个 LineChart。每个折线图都有一条线对应数据中表示的每个 ID。我正在尝试更轻松地将奇怪的图形数据与原始输入数据相关联。

我希望能够单击一个数据点（或者更好的是 select ChartLegend 中的一行），这样做会导致数据Table 过滤并仅显示关联的行使用 selected id。

这是我如何生成数据Table 和图表

的代码片段

def Make_PlottyFigures(df, xcol_name, device_type_dict, device_names, columns_to_plot):
    figs = []
    for col_i in range(0, len(columns_to_plot)):            
        figs.append(go.Figure())

    #Go over each device, and add a trace for each column to the appropriate figure. We want each colun in its own figure 
    for device in device_names:
        if df[df['id'] == device].shape[0] > 0:
            axs_index = 0
            for col in columns_to_plot:
                figs[axs_index].add_trace(go.Scatter(x=df[xcol_name], y=df[df['id'] == device][col],
                        mode='lines+markers',
                        name=f"{device_type_dict[device]}-{device}"))
                axs_index += 1

    index = 0;
    for col in columns_to_plot:
        figs[index].update_layout(
        title=f"{col}",
        xaxis_title="",
        yaxis_title="",
        font=dict(
                family="Courier New, monospace",
                size=18,
                color="#7f7f7f"
            )
        )
        index += 1
    return figs


def DASH_dataTable_from_pd(id, df):
    return dash_table.DataTable(
        id=f'datatable-{id}',
        columns=[
            {"name": i, "id": i, "deletable": False, "selectable": False} for i in df.columns
        ],
        data=df.to_dict('records'),
        editable=False,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        column_selectable="single",
        row_selectable="multi",
        row_deletable=False,
        selected_columns=[],
        selected_rows=[],
        page_action="native",
        page_current= 0,
        page_size= 10,
    )

我曾尝试在网上寻找类似的东西，但没有找到任何东西。 https://dash.plotly.com/datatable/interactivity has a 'sorta' example but its in the opposite direction( Making selections in the Table highlight the equivilant chart data entry). https://dash-docs.herokuapp.com/interactive-graphing 有关于如何对我感兴趣的事件做出反应的示例，我只是停留在如何让 Table 过滤掉这些事件触发（也让这个可发布会很好）

有没有我遗漏的样本，或者这很明显，我遗漏了什么

Answer 1

直接的方法是重新设置table的data属性，只传递你想显示的行。您可以监听跟踪点击事件，通过索引、customdata 或 clickData 对象附带的任何其他属性确定点击跟踪。

这个基本示例说明了这个想法：

df = [...]

@app.callback(
    Output("my-table", "data"),
    [Input("my-plot", "clickData")]
)
def on_trace_click(click_data):
    """Listen to click events and update table, passing filtered rows"""
    p = trace_click['points'][0]

    # here, use 'customdata' property of clicked point, 
    # could also use 'curveNumber', 'pointIndex', etc.
    if 'customdata' in p:
        key = p['customdata']['my-key']

    df_f = get_corresponding_rows(df, key)

    return df_f.to_dict('records')

def get_corresponding_rows(df, my_key):
    """Filter df, return rows that match my_key"""
    return df[df['key-column'] == my_key]

重要的是您的行 ID 不要仅仅因为过滤而改变。这样，任何样式、已选择 状态等仍将正确应用。

Plotly Dash：根据绘图选择过滤 DataTable

Plotly Dash: filter DataTable based on plot selection

python

pandas

plotly

plotly-dash