Plotly实现单条折线按code1变量分段上色的方法

问题背景 #

原本绘制了一条无颜色区分的折线图，添加color="code1"参数后，图表被拆分为对应code1不同取值的多条折线，但实际需求是保持单条折线结构，仅按code1的取值为折线的不同分段设置对应颜色。

问题复现 #

以下代码会生成多条折线的图表，不符合需求：

import pandas as pd
import numpy as np
import plotly.express as px

df = pd.DataFrame({'date': pd.date_range(start='1/1/2018', periods=800),
                     'value': np.random.randint(0, 1000, 800)})
# 添加阶段标识列
df['code1'] = np.repeat(['ABC', 'BCD', 'CDE', 'DEF']*4, 50)
fig = px.line(df, x="date", y="value", color="code1", template='plotly_white')
fig.add_scatter(x=df["date"], y=df["value"], line=dict(color="white"))
fig.update_yaxes(autorange="reversed")
fig.update_layout(title="day vs depth", xaxis_title="date", yaxis_title="depth")
fig.show()

解决方案 #

通过创建周期标识区分同一code1的不同出现周期，结合line_group参数实现单条折线的分段着色：

import pandas as pd
import numpy as np
import plotly.express as px

df = pd.DataFrame({
    'date': pd.date_range(start='1/1/2018', periods=800),
    'value': np.random.randint(0, 1000, 800)
})

df['code1'] = np.repeat(['ABC', 'BCD', 'CDE', 'DEF']*4, 50)

# 生成周期列：每次code1变化时递增，区分同一code1的不同分段周期
df['cycle'] = (df['code1'] != df['code1'].shift()).cumsum()
# 组合code1和cycle为唯一分组标识
df['code_cycle'] = df['code1'] + '_' + df['cycle'].astype(str)

# 自定义code1对应的颜色映射
color_discrete_map = {'ABC': 'blue', 'BCD': 'green', 'CDE': 'red', 'DEF': 'purple'}

# 使用line_group指定折线分组，color指定分段颜色
fig = px.line(df, x="date", y="value", color='code1', line_group='code_cycle', 
              color_discrete_map=color_discrete_map, template='plotly_white')

fig.update_yaxes(autorange="reversed") 
fig.update_layout(title="day vs depth", xaxis_title="date", yaxis_title="depth")
fig.update_traces(connectgaps=False) # 避免不同分段间自动连接
fig.show()

该代码会生成单条折线，并按code1的不同取值为折线分段设置对应颜色。

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