Plotly Python：修复带多折线与下拉过滤的折线图抖动问题

问题根源 #

你的代码核心问题在于下拉按钮的更新逻辑没有匹配多折线的结构：

• 初始化时按Animal添加了2条独立trace（Cat和Dog）
• 但下拉按钮的args只针对索引为[0]的trace更新，并且直接传入过滤后整个数据集的x/y，导致两条折线的数据被错误覆盖或混淆，最终出现抖动混乱。

修正方案 #

需要调整下拉按钮的更新逻辑，让每个按钮对应更新所有Animal的trace数据，具体修改点：

1. 初始化trace时，确保每个Animal的trace对应全量数据（所有Category）
2. 构建下拉按钮时，对每个Category，分别提取每个Animal在该Category下的x/y数据，批量更新所有trace
3. "All"按钮恢复每个Animal的全量数据

修正后的完整代码 #

import plotly.graph_objects as go
import pandas as pd

def plot_line_go_graph(df, col_x, col_y, col_color=None, col_filter=None, add_points=False):
    df_graph = df.copy()
    
    param_mode = 'lines+markers' if add_points else 'lines'
    
    fig = go.Figure()
    
    # 初始化trace：按col_color分组添加，默认显示全量数据
    if col_color is not None:
        for c in df_graph[col_color].unique():
            filtered_df = df_graph[df_graph[col_color] == c]
            fig.add_trace(go.Scatter(
                x=filtered_df[col_x],
                y=filtered_df[col_y],
                mode=param_mode,
                name=c
            ))
    else:
        fig.add_trace(go.Scatter(
            x=df_graph[col_x],
            y=df_graph[col_y],
            mode=param_mode,
            name='lines' if not add_points else 'lines+markers'
        ))
    
    if col_filter is not None:
        df_graph[col_filter] = df_graph[col_filter].fillna("NaN")
        unique_filters = df_graph[col_filter].unique()
        
        buttons = []
        
        # "All"按钮：恢复每个trace的全量数据
        all_args = {'y': [], 'x': []}
        for c in df_graph[col_color].unique():
            filtered_df = df_graph[df_graph[col_color] == c]
            all_args['y'].append(filtered_df[col_y])
            all_args['x'].append(filtered_df[col_x])
        buttons.append(dict(
            method='restyle',
            label="All",
            args=[all_args, list(range(len(fig.data)))]  # 更新所有trace
        ))
        
        # 每个Category对应的按钮
        for f in unique_filters:
            filter_args = {'y': [], 'x': []}
            for c in df_graph[col_color].unique():
                filtered_df = df_graph[(df_graph[col_color] == c) & (df_graph[col_filter] == f)]
                filter_args['y'].append(filtered_df[col_y])
                filter_args['x'].append(filtered_df[col_x])
            buttons.append(dict(
                method='restyle',
                label=f,
                args=[filter_args, list(range(len(fig.data)))]  # 更新所有trace
            ))
        
        # 配置下拉菜单
        updatemenu = [{
            'buttons': buttons,
            'direction': 'down',
            'showactive': True,
            'x': 0.1,
            'y': 1.15
        }]
        
        fig.update_layout(updatemenus=updatemenus)
    
    # 图表样式配置
    fig.update_layout(
        plot_bgcolor='rgba(0,0,0,0)',
        paper_bgcolor='rgba(0,0,0,0)',
        hoverlabel=dict(font_size=12),
        hovermode="x"
    )
    
    fig.update_xaxes(
        showspikes=True,
        spikecolor='black',
        showline=True,
        linewidth=1,
        linecolor='black',
        ticks="outside",
        tickwidth=1,
        tickcolor='black',
        ticklen=5
    )
    
    fig.update_yaxes(
        showspikes=True,
        spikecolor='black',
        showline=True,
        linewidth=1,
        linecolor='black',
        ticks="outside",
        tickwidth=1,
        tickcolor='black',
        ticklen=5
    )
    
    fig.show()

# 测试调用
df = pd.DataFrame({
    "Date": ["2022-10-01","2022-10-02","2022-10-03","2022-10-01","2022-10-02","2022-10-03","2022-10-01","2022-10-02","2022-10-03","2022-10-01","2022-10-02","2022-10-03"],
    "Animal" :["Cat","Cat","Cat","Cat","Cat","Cat","Dog","Dog","Dog","Dog","Dog","Dog"],
    "Category":["Small","Small","Small","Big","Big","Big","Small","Small","Small","Big","Big","Big"],
    "Quantity":[2,4,3,5,1,2,6,5,6,4,2,1]
})
df["Date"] = df["Date"].astype('datetime64')

plot_line_go_graph(df,"Date","Quantity",col_color = "Animal", col_filter = "Category",add_points = False)

效果说明 #

修正后：

• 初始显示所有Category下的Cat和Dog两条折线
• 选择"Small"或"Big"时，会分别更新两条折线为对应Category下的数据，不会出现抖动
• 选择"All"可恢复全量数据视图

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