Dash中Upload组件上传数据在其他组件复用的问题求助

Hey there! I see exactly what's going on—your uploaded CSV data isn't making its way to the dropdowns or graph because you're not storing and sharing the data between components properly. Let's fix this step by step using Dash's built-in tools to make the data reusable across your entire app.

What Was Missing in the Original Code? #

• The global df variable never actually gets updated with the uploaded data (the df inside parse_contents is just a local variable that disappears after the function runs).
• There was no mechanism to pass the uploaded data's column names to populate the dropdowns.
• No callback to tie together dropdown selections and the uploaded data to generate your desired graph.

The Solution: Use dcc.Store to Share Data Between Components #

Dash recommends using dcc.Store to hold intermediate data (like your uploaded DataFrame) so it can be accessed by multiple callbacks. Here's the revised code with clear explanations:

import base64
import datetime
import io
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div(children='this is an attempt to do stuff right'),
    # Dropdowns for axis selection with placeholders
    dcc.Dropdown(id='x-axis-dropdown', placeholder='Select X Axis'),
    dcc.Dropdown(id='y-axis-dropdown', placeholder='Select Y Axis'),
    # Dropdown for graph type
    dcc.Dropdown(
        id='graphtype', 
        options=[
            {'label': 'Bar', 'value': 'Bar'},
            {'label': 'Scatter', 'value': 'Scatter'},
            {'label': 'Histogram', 'value': 'Hist'}
        ],
        placeholder='Select Graph Type'
    ),
    # Upload component (set to single file for simplicity)
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
        multiple=False
    ),
    # Hidden store to hold uploaded data in JSON format
    dcc.Store(id='uploaded-data'),
    # Output for data preview
    html.Div(id='output-data-upload'),
    # Output graph
    dcc.Graph(id='output-graph')
])

def parse_contents(contents, filename, date):
    content_type, content_string = contents.split(',')
    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            df = pd.read_csv(io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            df = pd.read_excel(io.BytesIO(decoded))
        else:
            return html.Div(['Unsupported file format. Please upload CSV or Excel.']), None
    except Exception as e:
        print(e)
        return html.Div(['There was an error processing this file.']), None
    
    # Return both the preview component and the parsed DataFrame
    preview = html.Div([
        html.H5(filename),
        html.H6(datetime.datetime.fromtimestamp(date)),
        dash_table.DataTable(
            data=df.to_dict('records'),
            columns=[{'name': i, 'id': i} for i in df.columns],
            page_size=10  # Limit preview rows for better performance
        ),
        html.Hr()
    ])
    return preview, df

@app.callback(
    [Output('output-data-upload', 'children'),
     Output('uploaded-data', 'data')],
    [Input('upload-data', 'contents')],
    [State('upload-data', 'filename'),
     State('upload-data', 'last_modified')]
)
def update_output(contents, filename, date):
    if contents is not None:
        preview, df = parse_contents(contents, filename, date)
        # Convert DataFrame to JSON for storage in dcc.Store
        return preview, df.to_dict('records')
    return None, None

@app.callback(
    [Output('x-axis-dropdown', 'options'),
     Output('y-axis-dropdown', 'options')],
    [Input('uploaded-data', 'data')]
)
def update_dropdown_options(data):
    if data is None:
        return [], []
    # Convert JSON back to DataFrame to get column names
    df = pd.DataFrame(data)
    # Create dropdown options from column names
    options = [{'label': col, 'value': col} for col in df.columns]
    return options, options

@app.callback(
    Output('output-graph', 'figure'),
    [Input('x-axis-dropdown', 'value'),
     Input('y-axis-dropdown', 'value'),
     Input('graphtype', 'value')],
    [State('uploaded-data', 'data')]
)
def update_graph(x_col, y_col, graph_type, data):
    # Default empty figure if no data or selections are made
    fig = px.scatter(title='Select axes and graph type to visualize')
    
    if data is not None and x_col and y_col and graph_type:
        df = pd.DataFrame(data)
        # Generate the appropriate graph based on selection
        if graph_type == 'Bar':
            fig = px.bar(df, x=x_col, y=y_col)
        elif graph_type == 'Scatter':
            fig = px.scatter(df, x=x_col, y=y_col)
        elif graph_type == 'Hist':
            # Histogram uses only one axis (we'll use the X-axis selection here)
            fig = px.histogram(df, x=x_col)
    
    return fig

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

Key Changes Explained: #

1. Added dcc.Store: This hidden component stores your uploaded data in JSON format, making it safe to access across all callbacks (no more unreliable global variables!).
2. Updated parse_contents: Now returns both the data preview component and the parsed DataFrame, so we can pass the raw data to dcc.Store.
3. Dropdown Populate Callback: Reads the stored data, converts it back to a DataFrame, and sets the dropdown options to match the CSV's column names.
4. Graph Generation Callback: Ties together your dropdown selections and the uploaded data to generate the correct Plotly figure. It handles edge cases (like missing selections) with a friendly default graph.
5. Simplified Upload Handling: Set multiple=False to focus on single-file uploads (you can adjust this back if needed, but you'll need to add logic to handle multiple files).

Now when you upload a CSV, your dropdowns will automatically populate with column names, and selecting options will generate the exact graph you want!

内容的提问来源于stack exchange，提问作者Filipe F.