Plotly时间线图表下拉菜单点击后无法更新问题求助

问题原因 #

1. 属性名称错误：Plotly Express生成的Timeline图表，实际用x0表示开始时间、x1表示结束时间，而非代码里的x_start和x_end。
2. 参数结构错误：update方法的args参数需要将所有trace属性放在同一个字典中，不能拆成多个独立字典。
3. 未同步关联数据：筛选数据后，没有同步更新颜色映射和hover信息，导致图表显示逻辑不一致。

修改后的代码 #

import pandas as pd
import plotly.express as px

def main():
    d = {
    'T_ID': ['T1', 'T2', 'T3', 'T1'],
    'TYPE': ['Type1', 'Type2', 'Type3', 'Type2'],
    'SYS_START_TIME': ['2021-06-20 06:05', '2021-06-23 15:13', '2021-06-27 13:01', '2021-06-29 14:02'],
    'SYS_END_TIME': ['2021-06-20 11:39', '2021-06-23 15:25', '2021-06-27 13:09', '2021-06-29 15:09'],
}
    df = pd.DataFrame(data=d)

    df['SYS_START_TIME'] = pd.to_datetime(df['SYS_START_TIME'])
    df['SYS_END_TIME'] = pd.to_datetime(df['SYS_END_TIME'])

    labels = df["T_ID"].unique()

    # 预定义TYPE对应的颜色映射，保持和原图表一致
    color_list = px.colors.qualitative.Plotly[:len(df['TYPE'].unique())]
    color_map = dict(zip(df['TYPE'].unique(), color_list))
    df['trace_color'] = df['TYPE'].map(color_map)

    # 构建下拉菜单按钮
    buttonsLabels = [dict(label="All",
                          method="update",
                          args=[
                              {
                                  'x0': [df.SYS_START_TIME],
                                  'x1': [df.SYS_END_TIME],
                                  'y': [df.T_ID],
                                  'marker.color': [df['trace_color']],
                                  'hovertext': [df.apply(lambda row: f"开始时间: {row.SYS_START_TIME}<br>结束时间: {row.SYS_END_TIME}<br>类型: {row.TYPE}", axis=1)]
                              },
                              {}  # 布局更新留空
                          ]
                          )]

    for label in labels:
        filtered_df = df.loc[df.T_ID == label]
        buttonsLabels.append(dict(label=label,
                                  method="update",
                                  args=[
                                      {
                                          'x0': [filtered_df.SYS_START_TIME],
                                          'x1': [filtered_df.SYS_END_TIME],
                                          'y': [filtered_df.T_ID],
                                          'marker.color': [filtered_df['trace_color']],
                                          'hovertext': [filtered_df.apply(lambda row: f"开始时间: {row.SYS_START_TIME}<br>结束时间: {row.SYS_END_TIME}<br>类型: {row.TYPE}", axis=1)]
                                      },
                                      {}
                                  ]
                                  ))

    fig = px.timeline(
        df,
        x_start="SYS_START_TIME",
        x_end="SYS_END_TIME",
        y="T_ID",
        color="TYPE",
        hover_data=['SYS_START_TIME', 'SYS_END_TIME', 'TYPE']
    )

    # 将多TYPE对应的trace合并为单个trace，简化下拉更新逻辑
    fig.data = [dict(
        type='bar',
        x0=df.SYS_START_TIME,
        x1=df.SYS_END_TIME,
        y=df.T_ID,
        marker=dict(color=df['trace_color']),
        hovertext=df.apply(lambda row: f"开始时间: {row.SYS_START_TIME}<br>结束时间: {row.SYS_END_TIME}<br>类型: {row.TYPE}", axis=1),
        hoverinfo='text'
    )]

    fig.update_layout(xaxis=dict(
        title='日期',
        tickformat='%Y-%m-%d %H:%M',
        dtick="D",
        showgrid=True
    ), updatemenus=[dict(buttons=buttonsLabels, showactive=True, x=0.1, y=1.1)])

    fig.show()

if __name__ == '__main__':
    main()

关键修改说明 #

• 替换属性名：用x0/x1替代错误的x_start/x_end，匹配Plotly Timeline的实际属性。
• 调整参数结构：把所有trace更新属性整合到同一个字典中，符合update方法的参数要求。
• 统一颜色映射：预定义TYPE对应的颜色，保证筛选前后颜色显示一致。
• 合并trace：将原代码中按TYPE拆分的多个trace合并为一个，简化下拉菜单的更新逻辑。
• 同步hover信息：自定义hover文本，确保筛选后鼠标悬停的信息正常显示。

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