Plotly双下拉列表开发求助：年份与预报条件选择功能实现

核心问题在于双下拉的visible参数需要覆盖年份×预报条件的所有组合，单下拉仅需处理单一维度的可见性，双下拉要做二维映射。以下是具体实现方案：

1. 预先生成全量Trace集合 #

遍历所有年份和预报条件的组合，生成对应的碰撞数据（如折线）和预报数据（如柱状）Trace，给每个Trace的name添加年份和条件标识，方便后续可见性判断。

示例代码：

import plotly.graph_objects as go

# 假设已定义年份列表、预报条件列表，以及分组后的Collisions、Forecast数据集
years = ["2020", "2021", "2022"]
forecast_conditions = ["Sunny", "Rainy", "Snowy"]

traces = []
# 遍历所有年份+条件组合生成Trace
for year in years:
    for cond in forecast_conditions:
        # 获取对应年份的碰撞数据
        coll_df = Collisions[Collisions["year"] == year]
        # 获取对应年份+条件的预报数据
        fore_df = Forecast[(Forecast["year"] == year) & (Forecast["condition"] == cond)]
        
        # 添加碰撞数据折线Trace
        traces.append(go.Scatter(
            x=coll_df["date"],
            y=coll_df["collision_count"],
            name=f"Collide_{year}_{cond}",
            # 默认仅显示第一个年份+第一个条件的Trace
            visible=(year == years[0] and cond == forecast_conditions[0])
        ))
        # 添加预报数据柱状Trace
        traces.append(go.Bar(
            x=fore_df["date"],
            y=fore_df["forecast_value"],
            name=f"Forecast_{year}_{cond}",
            visible=(year == years[0] and cond == forecast_conditions[0])
        ))

2. 构建年份下拉按钮的可见性逻辑 #

每个年份选项对应：仅显示该年份下所有预报条件的Trace，隐藏其他年份的所有Trace。通过检查Trace的name是否包含当前年份来生成visible列表。

示例代码：

year_buttons = []
for year in years:
    visible_list = [year in trace.name for trace in traces]
    year_buttons.append({
        "label": f"年份 {year}",
        "method": "update",
        "args": [
            {"visible": visible_list},
            {"title": f"{year}年 碰撞数据与预报"}
        ]
    })

3. 构建预报条件下拉按钮的可见性逻辑 #

每个预报条件选项对应：仅显示该条件下所有年份的Trace，隐藏其他条件的所有Trace。通过检查Trace的name是否包含当前条件来生成visible列表。

示例代码：

cond_buttons = []
for cond in forecast_conditions:
    visible_list = [cond in trace.name for trace in traces]
    cond_buttons.append({
        "label": cond,
        "method": "update",
        "args": [
            {"visible": visible_list},
            {"title": f"{cond}条件下 碰撞数据与预报"}
        ]
    })

4. 组装布局并渲染图表 #

将两个下拉按钮添加到布局中，设置初始标题和轴标签：

fig = go.Figure(data=traces)
fig.update_layout(
    updatemenus=[
        # 年份下拉按钮位置
        {
            "buttons": year_buttons,
            "direction": "down",
            "showactive": True,
            "x": 0.05,
            "xanchor": "left",
            "y": 1.12,
            "yanchor": "top"
        },
        # 预报条件下拉按钮位置
        {
            "buttons": cond_buttons,
            "direction": "down",
            "showactive": True,
            "x": 0.25,
            "xanchor": "left",
            "y": 1.12,
            "yanchor": "top"
        }
    ],
    title=f"{years[0]}年 - {forecast_conditions[0]} 碰撞数据与预报",
    yaxis_title="数量/指标值"
)

fig.show()

关键说明 #

• Trace的name是可见性判断的核心，必须包含年份和条件的唯一标识
• 两个下拉按钮的visible列表独立生成，分别对应各自维度的筛选逻辑
• 默认状态设置为第一个年份+第一个条件的组合，确保初始加载有可见内容

内容的提问来源于stack exchange，提问作者Alex Abades Grimes