Plotly时间轴中color_discrete_map导致区块对齐错乱问题

问题重现 #

使用Plotly Express创建时间轴图表时，未设置color参数时三个区块对齐正常，但通过color关联selected字段并使用color_discrete_map指定颜色后，出现区块对齐错乱的问题。

原代码：

import pandas as pd
import plotly.express as px

df = pd.DataFrame.from_dict(
    {
        'y': [2,3,4],
        'van': [pd.Timestamp("2023-08-07 09:00"), pd.Timestamp("2023-08-07 14:30"), pd.Timestamp("2023-08-07 17:00")],
        'tot': [pd.Timestamp("2023-08-07 17:00"), pd.Timestamp("2023-08-07 22:30"), pd.Timestamp("2023-08-08 01:00")],
        'selected': [False, True, False]
    }
)

fig = px.timeline(df, x_start='van', x_end='tot', y='y',
                          = "selected",
                           color_discrete_map = {True: "#CDCDD3", False: "#8C8C8F"},
                           )
fig.show()

问题原因 #

当用color参数对selected布尔字段分组时，Plotly会将数据拆分为两个独立的trace（True组和False组），而时间轴的y轴默认会对每个trace的y值重新编码，导致原本的y值（2、3、4）被打乱分配，最终出现对齐错乱。

解决方法 #

方法一：固定y轴分类顺序 #

在px.timeline中添加category_orders参数，强制指定y轴的顺序为原数据中的y值列表，确保每个数据点的y轴位置不被打乱：

import pandas as pd
import plotly.express as px

df = pd.DataFrame.from_dict(
    {
        'y': [2,3,4],
        'van': [pd.Timestamp("2023-08-07 09:00"), pd.Timestamp("2023-08-07 14:30"), pd.Timestamp("2023-08-07 17:00")],
        'tot': [pd.Timestamp("2023-08-07 17:00"), pd.Timestamp("2023-08-07 22:30"), pd.Timestamp("2023-08-08 01:00")],
        'selected': [False, True, False]
    }
)

fig = px.timeline(df, x_start='van', x_end='tot', y='y',
                  color="selected",
                  color_discrete_map={True: "#CDCDD3", False: "#8C8C8F"},
                  category_orders={"y": [2, 3, 4]}  # 锁定y轴顺序
                  )
fig.show()

方法二：跳过分组，直接设置单条trace颜色 #

不使用color参数分组，而是创建基础时间轴后，遍历每个数据点对应的trace，根据selected字段的值单独设置颜色：

import pandas as pd
import plotly.express as px

df = pd.DataFrame.from_dict(
    {
        'y': [2,3,4],
        'van': [pd.Timestamp("2023-08-07 09:00"), pd.Timestamp("2023-08-07 14:30"), pd.Timestamp("2023-08-07 17:00")],
        'tot': [pd.Timestamp("2023-08-07 17:00"), pd.Timestamp("2023-08-07 22:30"), pd.Timestamp("2023-08-08 01:00")],
        'selected': [False, True, False]
    }
)

fig = px.timeline(df, x_start='van', x_end='tot', y='y')
# 逐个设置每个区块的颜色
for idx, is_selected in enumerate(df['selected']):
    fig.data[idx].marker.color = "#CDCDD3" if is_selected else "#8C8C8F"
fig.show()

效果验证 #

两种方法都能让时间轴区块恢复正常对齐，同时保留根据selected字段区分颜色的需求。

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