Plotly+Dash下拉多选时无法同时展示多Y轴序列图表的问题

你设置multi=True后，下拉组件返回的输入值是所有选中项构成的字符串列表，不是单选模式下的单个字符串。原有回调逻辑按单个字符串做等值判断、返回预先生成的单序列图表，既匹配不了列表格式的输入，也不可能同时渲染多个指标。

不需要提前生成fig1、fig2这类单序列独立图表，直接在回调函数里根据选中的指标列表，动态生成多序列折线图即可。Plotly Express原生支持传入Y轴字段列表，自动生成共享X轴的多序列折线，完全匹配多选交互的需求。

核心修改点：

• 下拉组件的默认值改成列表格式，和多选模式的返回值类型对齐，比如默认选中价格就写value=['Price']
• 删掉回调里逐个判断返回单图的逻辑，直接把选中的指标列表传给px.line的y参数

修正后的完整代码如下：

import pandas as pd
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
# Jupyter环境使用JupyterDash，普通.py脚本运行可替换为dash.Dash
from jupyter_dash import JupyterDash

# 替换为你自己的数据源，保证包含Date字段和所有下拉选项对应的指标列
# full_data = pd.read_csv("你的数据文件路径.csv")

app = JupyterDash(__name__)

#---------------------------------------------------------------
app.layout = html.Div([
    html.Div([
        html.Label(['Full Chart']),
        dcc.Dropdown(
            id='my_dropdown',
            options=[
                     {'label': 'Price', 'value': 'Price'},
                     {'label': 'Volume', 'value': 'Volume'},
                     {'label': 'Positive Tweets', 'value': 'Positive Tweets'},
                     {'label': 'Negative Tweets', 'value': 'Negative Tweets'},
                     {'label': 'Neutral Tweets', 'value': 'Neutral Tweets'},
                     {'label': 'Total Number of Tweets', 'value': 'Total Number of Tweets'}
            ],
            # 多选模式默认值必须为列表，不能传单个字符串
            value=['Price'],
            multi=True,
            clearable=False,
            style={"width": "50%"}
        ),
    ]),

    html.Div([
        dcc.Graph(id='the_graph')
    ]),

])

#---------------------------------------------------------------
@app.callback(
    Output(component_id='the_graph', component_property='figure'),
    [Input(component_id='my_dropdown', component_property='value')]
)
def update_graph(selected_metrics):
    # 直接将选中的指标列表传入y参数，自动生成对应多序列折线
    fig = px.line(
        full_data,
        x="Date",
        y=selected_metrics,
        title="Multi-Metric Trend"
    )
    # 若不同指标量级差异过大（如价格和推文量差数个量级），可放开下方注释配置多Y轴
    # fig.update_layout(
    #     yaxis=dict(title=selected_metrics[0]),
    #     yaxis2=dict(title='Other Metrics', overlaying='y', side='right')
    # )
    # for metric in selected_metrics[1:]:
    #     fig.update_traces(yaxis='y2', selector=dict(name=metric))
    return fig

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

补充说明 #

• 下拉选项里的label是页面展示给用户的文字，value必须和full_data里的列名完全一致，否则会报字段找不到的错误。
• 该方案下图表序列和下拉选中状态完全同步：选中几个指标就渲染几条折线，取消选中的指标自动从图中移除，不需要额外写逻辑单独控制序列显隐。
• 如果使用新版本Dash，可直接从dash包导入dcc和html，不需要单独导入dash_core_components和dash_html_components，核心逻辑不受影响。

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