如何在 dash 应用程序中将绘图数据映射到网格

Question

我有一个小型的单页破折号应用程序，带有一个基于某些 va 的 dash-ag-grid 表，以及一个 go.Scatter 图（线+标记），它也基于来自同一 df 的数据。请告诉我如何进行映射，以便在选择图表上的区域时，表格仅显示该图表上所选时间戳的数据。

网格：

def create_grid(df):
    columnDefs=[{'headerName': col, 'field': col} for col in df.columns]
    ag_grid = dag.AgGrid(
        id="ag-grid",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
    )
    return ag_grid

情节：

def plot(df, group_by, param, per=None):
    group_by = 'timestamp'
    fig = go.Figure()
    cum_sum = df.groupby(group_by)[param].sum().reset_index()
    
    fig.add_trace(go.Scatter(x=cum_sum[group_by],y=cum_sum[param],mode='lines',name=param,marker=dict(color=color)),) 
        
    for _, row in cum_sum.iterrows():
        group = row[group_by_label]
        fig.add_scatter(x=[group], y=[row[param]], mode='markers', name='', 
            showlegend=False,marker=dict(color=color),)  

    fig.update_layout(title='Title',xaxis=dict(type='category'),height=height,)
    return fig

应用程序：

app.layout = html.Div([
    html.Div([grid]),
    dcc.Graph(id='scatter',figure=fig1)])

Answer 1

您可以在 Dash 中使用回调。

import dash
from dash import dcc, html, callback_context
import dash_ag_grid as dag
import pandas as pd
import plotly.graph_objs as go

# Sample DataFrame
df = pd.DataFrame({
    'timestamp': pd.date_range(start='2024-03-01', end='2024-03-10'),
    'value': range(10)
})

# Define your color and other constants
color = 'blue'
height = 500

# Function to create the grid
def create_grid(df):
    columnDefs = [{'headerName': col, 'field': col} for col in df.columns]
    ag_grid = dag.AgGrid(
        id="ag-grid",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
    )
    return ag_grid

# Function to create the scatter plot
def plot(df, param):
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=df['timestamp'], y=df[param], mode='lines+markers', name=param, marker=dict(color=color)))
    fig.update_layout(title='Title', xaxis=dict(type='category'), height=height)
    return fig

# Initialize Dash app
app = dash.Dash(__name__)

# Define layout
app.layout = html.Div([
    html.Div(id='table-container', children=[create_grid(df)]),
    dcc.Graph(id='scatter', figure=plot(df, 'value'))
])

# Callback to update table data based on selected area in scatter plot
@app.callback(
    dash.dependencies.Output('ag-grid', 'rowData'),
    [dash.dependencies.Input('scatter', 'selectedData')]
)
def update_table(selected_data):
    if selected_data is None:
        # No area selected, return original data
        return df.to_dict("records")
    else:
        # Filter data based on selected area
        selected_points = selected_data['points']
        timestamps = [point['x'] for point in selected_points]
        filtered_df = df[df['timestamp'].isin(timestamps)]
        return filtered_df.to_dict("records")

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True)

现在，当您在散点图上选择一个区域时，表格将更新以仅显示所选时间戳的数据。