Plotly如何向fillcolor参数传递颜色数组实现条件填充

报错原因 #

Plotly 中 Scatter 类的 fillcolor 参数原生仅支持单个颜色值，不接受数组类型输入，这是官方API的既定设计，所以直接传入numpy数组或者字典封装的数组都会触发类型错误。

可行实现方案 #

方案1：拆分多段Scatter迹实现（推荐） #

核心逻辑是把y值满足不同条件的区域拆分为独立的散点迹，每个迹单独设置对应的填充色。不满足条件的点位设为None即可自动断开迹，避免跨区域渲染，最后叠加一条完整的主线条即可消除分段处的线条断裂问题。
示例代码如下：

import plotly.graph_objects as go
import numpy as np

# 示例测试数据
x = np.arange(0, 20, 0.1)
y = np.sin(x) * 10

fig = go.Figure()
# 生成条件掩码
mask_green = y > -5
mask_red = ~mask_green

# 绘制绿色填充段
y_green = y.copy()
y_green[mask_red] = None
fig.add_trace(go.Scatter(
    x=x, y=y_green,
    mode='lines',
    fill='tozeroy',
    fillcolor='green',
    line=dict(width=0), # 隐藏分段线条，避免边界出现杂色
    showlegend=False
))

# 绘制红色填充段
y_red = y.copy()
y_red[mask_green] = None
fig.add_trace(go.Scatter(
    x=x, y=y_red,
    mode='lines',
    fill='tozeroy',
    fillcolor='red',
    line=dict(width=0),
    showlegend=False
))

# 叠加顶层完整主线条
fig.add_trace(go.Scatter(
    x=x, y=y,
    mode='lines',
    line=dict(color='rgba(255, 0, 0, 0.9)'),
    name='price'
))

fig.show()

方案2：矩形标注叠加 #

如果条件是按x轴固定区间划分，可以直接在图表底层叠加矩形填充块，代码更简洁，但灵活度较低，仅适合规则区间场景：

# 示例：x在2~5区间填充绿色，8~12区间填充红色
fig.add_vrect(x0=2, x1=5, fillcolor="green", opacity=0.5, layer="below", line_width=0)
fig.add_vrect(x0=8, x1=12, fillcolor="red", opacity=0.5, layer="below", line_width=0)

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