Plotly：滑块折线图复选框筛选失效及多选需求问询

问题分析 #

1. 下拉框失效空白：原代码添加折线（trace）时未设置legendgroup属性，导致筛选逻辑[t.legendgroup == c for t in fig.data]返回全False，所有折线被隐藏，图表显示空白。
2. 单选改多选复选框：原交互是单选按钮组，需调整为支持多选的下拉组件，实现分类的独立显示/隐藏切换。

修复后的完整代码 #

import plotly.graph_objects as go
import pandas as pd

# 模拟用户的DataFrame（已有ct2可跳过此段）
data = {
    "Category": ["A", "B", "C", "C", "A"],
    "Date": ["2022-06-01", "2022-06-02", "2022-06-03", "2022-06-01", "2022-06-05"],
    "Count": [123, 56, 42, 84, 32]
}
ct2 = pd.DataFrame(data)
ct2["Date"] = pd.to_datetime(ct2["Date"])

fig = go.Figure()
# 添加折线时绑定legendgroup，用于后续筛选匹配
for Category, group in ct2.groupby("Category"):
    fig.add_trace(go.Line(
        x=group["Date"],
        y=group["Count"],
        name=Category,
        legendgroup=Category,
        hovertemplate="Category=%s<br>Date=%{x}<br>Count=%{y}<extra></extra>" % Category
    ))

# 基础布局配置
fig.update_layout(
    title_text="带范围滑块与多选筛选的时间序列图",
    legend_title_text="分类",
    xaxis=dict(
        title_text="日期",
        rangeselector=dict(
            buttons=list([
                dict(count=2, label="近2月", step="month", stepmode="backward"),
                dict(count=6, label="近6月", step="month", stepmode="backward"),
                dict(count=1, label="年初至今", step="year", stepmode="todate"),
                dict(count=1, label="近1年", step="year", stepmode="backward"),
                dict(step="all", label="全部")
            ])
        ),
        rangeslider=dict(visible=True),
        type="date"
    ),
    yaxis=dict(title_text="数量")
)

# 配置支持多选的下拉筛选组件
fig.update_layout(
    updatemenus=[
        {
            "type": "dropdown",
            "direction": "down",
            "showactive": True,
            "buttons": [
                # 全选按钮
                {
                    "label": "全选",
                    "method": "restyle",
                    "args": ["visible", [True] * len(fig.data)]
                },
                # 取消全选按钮
                {
                    "label": "取消全选",
                    "method": "restyle",
                    "args": ["visible", [False] * len(fig.data)]
                },
                # 每个分类的独立切换按钮
                *[
                    {
                        "label": c,
                        "method": "restyle",
                        "args": [
                            "visible",
                            [not t.visible if t.legendgroup == c else t.visible for t in fig.data]
                            # 点击时仅切换对应分类的可见状态，其他分类保持当前状态
                        ]
                    }
                    for c in ct2["Category"].unique()
                ]
            ]
        }
    ]
)

fig.show()

关键修改说明 #

1. 修复下拉失效问题：添加折线时新增legendgroup=Category，让每个折线的图例组与分类名绑定，确保筛选逻辑能正确匹配目标折线。
2. 实现多选功能：
   • 将交互组件类型设为dropdown，创建下拉菜单；
   • 新增「全选」「取消全选」按钮快速切换所有折线状态；
   • 每个分类按钮采用切换逻辑：点击时仅改变对应分类折线的可见性，其他折线保持当前状态，实现多选效果；
3. 清理无效代码：删除原代码中未定义的fig.update_layout(fig_tmp.layout)，避免运行报错。

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