如何在Plotly中中途改变Ground Truth折线的颜色？

我有一个以timestamp为索引的DataFrame，包含Ground Truth和Predicted Values两列，示例数据如下：

timestamp                Ground Truth     Predicted Values
2012-04-01 00:30:00      251.71               NA
2012-04-01 00:15:00      652.782              NA
2012-04-01 00:00:00      458.099              NA
2012-03-31 23:45:00      3504.664             NA
2012-03-31 23:30:00      1215.76             1230
2012-03-31 23:15:00     -21.48               -19.99
2012-03-31 23:00:00     -8.538               -7.42
2012-03-31 22:40:00     -5.11                -5.2

当前用Plotly Express绘制折线图的代码如下：

fig = px.line(df, x = df.index, y = ['Ground Truth','Predicted Values'], markers='.')   
    
fig.update_xaxes(
        rangeslider_visible=True,
        rangeselector=dict(
            buttons=list([
                dict(count = 1, label = "1H", step = "hour", stepmode ="backward"),
                dict(step="all")
            ])
        )
    )
fig.show()

需求：让蓝色的Ground Truth折线在Predicted Values列NA值结束的位置（即该列开始有数值的位置）切换为其他颜色。

核心思路是把Ground Truth拆分为两个部分：Predicted Values为NA的区间，以及Predicted Values非NA的区间，分别绘制这两部分并设置不同颜色，再叠加Predicted Values的折线。

完整实现代码 #

import plotly.express as px
import pandas as pd

# 找到Predicted Values第一个非NA值的位置
first_valid_idx = df['Predicted Values'].first_valid_index()

# 拆分Ground Truth为两部分
gt_before = df.loc[:first_valid_idx, 'Ground Truth']
gt_after = df.loc[first_valid_idx:, 'Ground Truth']

# 初始化图表，先画Predicted Values（红色）
fig = px.line(df, x=df.index, y='Predicted Values', markers='.', color_discrete_sequence=['red'])

# 添加Ground Truth的前半部分（蓝色）
fig.add_scatter(x=gt_before.index, y=gt_before.values, mode='lines+markers', 
                name='Ground Truth', line=dict(color='blue'), marker=dict(symbol='dot'))

# 添加Ground Truth的后半部分（示例用绿色，可自行修改）
fig.add_scatter(x=gt_after.index, y=gt_after.values, mode='lines+markers', 
                name='Ground Truth (Post Prediction)', line=dict(color='green'), marker=dict(symbol='dot'))

# 保留原有的x轴交互设置
fig.update_xaxes(
    rangeslider_visible=True,
    rangeselector=dict(
        buttons=list([
            dict(count=1, label="1H", step="hour", stepmode="backward"),
            dict(step="all")
        ])
    )
)

# 调整图例顺序（可选）
fig.update_layout(legend=dict(traceorder='normal'))

fig.show()

关键说明 #

1. 数据拆分：用first_valid_index()定位Predicted Values第一个非空值的索引，以此为界把Ground Truth拆分为两段。
2. 分步绘图：先绘制Predicted Values折线，再分别添加两段Ground Truth，通过color参数指定不同颜色。
3. 样式匹配：用mode='lines+markers'匹配原代码的标记点样式，同时保留了原有的rangeslider和rangeselector交互功能。

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