如何在Dash折线图中基于DataFrame列添加X轴下拉选择器？

核心逻辑 #

Dash的交互功能靠回调函数实现：下拉选择器的变化触发回调，动态重新生成对应图表。以下是修改后的完整代码，包含两个独立下拉选择器分别控制两个折线图的X轴：

修改后完整代码 #

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

# 假设你已完成DataFrame清洗，df_1和df_2已定义
# df_1 = ... 
# df_2 = ...

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    # 第一个图表区域
    html.Div([
        html.H1(children='图表1'),
        html.Div(children='选择X轴列：'),
        # 图表1的X轴下拉选择器
        dcc.Dropdown(
            id='xaxis-selector-graph1',
            options=[
                {'label': '列Y', 'value': 'Y'},
                {'label': '列P', 'value': 'P'}
            ],
            value='Y',  # 默认选中Y列
            clearable=False
        ),
        dcc.Graph(id='graph1')
    ]),
    
    # 第二个图表区域
    html.Div([
        html.H1(children='图表2'),
        html.Div(children='选择X轴列：'),
        # 图表2的X轴下拉选择器
        dcc.Dropdown(
            id='xaxis-selector-graph2',
            options=[
                {'label': '列Y', 'value': 'Y'},
                {'label': '列P', 'value': 'P'}
            ],
            value='P',  # 默认选中P列
            clearable=False
        ),
        dcc.Graph(id='graph2')
    ]),
])

# 图表1的回调函数：根据下拉选择更新X轴
@app.callback(
    Output('graph1', 'figure'),
    Input('xaxis-selector-graph1', 'value')
)
def update_graph1(selected_x):
    return px.line(df_1, x=selected_x, y=['x','y'])

# 图表2的回调函数：根据下拉选择更新X轴
@app.callback(
    Output('graph2', 'figure'),
    Input('xaxis-selector-graph2', 'value')
)
def update_graph2(selected_x):
    return px.line(df_2, x=selected_x, y=['x','y'])

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

关键说明 #

• 下拉选择器配置：每个dcc.Dropdown通过id与回调绑定，options定义可选列，value设置默认选中项，clearable=False防止清空选择。
• 回调函数：每个图表对应独立回调，Input接收下拉选择器的当前值，Output指定要更新的图表的figure属性，函数内部根据选中的X轴列重新生成折线图。
• 动态生成图表：不再提前定义fig1和fig2，而是通过回调实时生成，确保选择变化后图表自动更新。

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