Dash Plotly下拉框选列后无法更新图表数据的技术求助

核心问题分析 #

你的代码存在三个关键问题导致图表无法同步：

1. 生成图表时使用了原始df而非年份筛选后的filtered_df，年份滑块完全失效
2. px.scatter的x、y参数硬编码为固定值"TMP"和"SPFH"，没有绑定下拉框传入的动态列名
3. 下拉框初始值设置为不存在的'Columns'，会导致初始加载时无有效数据

修正后的完整代码 #

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/RouseJo/DTSC691/main/Full.csv")

app = Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        df.columns,
        # 初始值改为实际存在的列名
        df.columns[0],
        id='xaxis-column'
    ),
    dcc.Dropdown(
        df.columns,
        df.columns[1],
        id='yaxis-column'
    ),
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        df['yr'].min(),
        df['yr'].max(),
        step=None,
        value=df['yr'].min(),
        marks={str(year): str(year) for year in df['yr'].unique()},
        id='year-slider'
    )
])


@callback(
    Output('graph-with-slider', 'figure'),
    Input('year-slider', 'value'),
    Input('xaxis-column', 'value'),
    Input('yaxis-column', 'value')
)
def update_figure(selected_year, xaxis_column_name, yaxis_column_name):
    filtered_df = df[df['yr'] == selected_year]

    # 核心修改：使用动态列名和筛选后的数据集
    fig = px.scatter(filtered_df, 
                     x=xaxis_column_name, 
                     y=yaxis_column_name,
                     size="wid", 
                     color="len", 
                     hover_name=yaxis_column_name,
                     log_x=True, 
                     size_max=55)

    # 更新x、y轴标题为选中的列名
    fig.update_xaxes(title=xaxis_column_name, type='linear')
    fig.update_yaxes(title=yaxis_column_name, type='linear')

    fig.update_layout(transition_duration=500)

    return fig


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

关键修改说明 #

• 下拉框初始值替换为DataFrame中实际存在的列名，避免初始加载异常
• px.scatter的x、y参数改为传入的xaxis_column_name和yaxis_column_name，实现动态绑定
• 图表数据源改为年份筛选后的filtered_df，让滑块生效
• 同步更新x轴标题为选中的列名，保持显示一致性

内容的提问来源于stack exchange，提问作者Jordan Rouse