Plotly/Dash下拉单选单标签如何映射多值渲染多条折线

Dash的dcc.Dropdown原生支持单个选项的value传入列表、字典等非字符串类型，不需要开启multi=True多选模式，你设想的value绑定多个关联值的写法本身是合法的，只要修正两个细节就能实现需求：

• 组件的默认value取值要和选项内的value格式对齐，不要用和选项value类型不匹配的字符串当默认值
• 回调中拿到下拉返回的选中值列表后，批量加载关联数据，在单个Plotly图对象中渲染所有折线即可，不需要拆分多个独立的px.line组件。

修正后的下拉组件代码 #

dcc.Dropdown(id='dropdown',
  options=[
    {'label': 'All cities in Hessen', 'value': ['Frankfurt', 'Wiesbaden', 'Darmstadt']},
    {'label': 'All cities in BaWü', 'value': ['Stuttgart', 'Mannheim', 'Karlsruhe']},
    {'label': 'All cities in Bavaria', 'value': ['Munich', 'Nuremberg', 'Augsburg']}
  ],
  optionHeight=35,
  # 默认值和选项value格式保持一致，这里默认选中黑森州所有城市
  value=['Frankfurt', 'Wiesbaden', 'Darmstadt'],
  multi=False,
  searchable=True,
  placeholder='Please choose...',
  className='box'
)

对应回调逻辑示例 #

假设你已经提前整理好按城市名索引的数据集字典city_dataset，字典key为城市名，value为对应城市的时序数据DataFrame（包含时间列、指标列），回调写法如下：

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

# 替换为你自己的数据集加载逻辑
city_dataset = {
    # 示例结构："Frankfurt": pd.DataFrame({"date": [...], "metric_value": [...]})
}

app = Dash(__name__)
app.layout = html.Div([
    # 放入上述修正后的Dropdown组件
    dcc.Dropdown(id='dropdown',
        options=[
            {'label': 'All cities in Hessen', 'value': ['Frankfurt', 'Wiesbaden', 'Darmstadt']},
            {'label': 'All cities in BaWü', 'value': ['Stuttgart', 'Mannheim', 'Karlsruhe']},
            {'label': 'All cities in Bavaria', 'value': ['Munich', 'Nuremberg', 'Augsburg']}
        ],
        optionHeight=35,
        value=['Frankfurt', 'Wiesbaden', 'Darmstadt'],
        multi=False,
        searchable=True,
        placeholder='Please choose...',
        className='box'
    ),
    dcc.Graph(id='trend_chart')
])

@app.callback(
    Output('trend_chart', 'figure'),
    Input('dropdown', 'value')
)
def render_multi_line(selected_cities):
    # 合并选中城市的所有数据
    df_list = []
    for city in selected_cities:
        city_df = city_dataset[city].copy()
        city_df['city'] = city
        df_list.append(city_df)
    plot_data = pd.concat(df_list)
    
    # 按城市分组一次性生成所有折线
    fig = px.line(
        plot_data,
        x='date',
        y='metric_value', # 替换为你自己的指标列名
        color='city',
        title='Regional City Indicator Trend'
    )
    return fig

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

注意事项 #

• multi=True是供用户手动勾选多个独立选项的交互模式，和你需要的「单选一个预设选项自动关联多个数据维度」的需求场景不匹配，不需要开启
• 单张Plotly图原生支持渲染上百条折线，不需要为每条折线单独创建dcc.Graph组件，单图渲染的交互体验更统一，性能也更好。

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