Plotly：如何在 Plotly 中繪制帶有漸變顏色的矩形？

Question

像矩形這樣的形狀在 Plotly 中可以有平滑的顏色漸變嗎？

我使用純色填充顏色將形狀定義為：

shapes=[dict(
    type='rect',
    xref='x',
    yref='paper',
    x0=box_from, x1=box_to,
    y0=0, y1=1,
    fillcolor='Green',
    opacity=0.07,
    layer='below',
    line=dict(width=0),
)]

但我希望盒子不要有純色填充，而是要有平滑的顏色漸變。

• 這是我正在關注的文檔中的示例：
  https://plotly.com/python/shapes/#highlighting-time-series-regions-with-rectangle-shapes
• 關於fillcolor的文檔不是很廣泛：
  https://plotly.com/python/reference/#layout-shapes-items-shape-fillcolor
  
• 我猜colorscales不適用於形狀：
  https://plotly.com/python/builtin-colorscales/

我的猜測是答案是一個簡單的“不支持”，但也許其他人更清楚。

Answer 1

如果我錯了，有人會糾正我，但我認為不，沒有直接的實現來填充漸變形狀。 但是要獲得類似的結果，您可以在矩形內繪制多條線，指定遞減的 rgb 值。

例如，我在文檔代碼中的第一個矩形定義之后添加了這個 for 循環（還將矩形填充顏色更改為白色）。

for i in range(100):
    fig.add_shape(type='line',
    xref="x",
    yref="y",
    x0=2.5,
    x1=3.5,
    y0=i*(2/100),
    y1=i*(2/100),
    line=dict(
                color='rgb({}, {}, {})'.format((i/100*255),(i/100*255),(i/100*255)),
                width=3,
            ))

結果是：

我知道這是不切實際的，它可以增加一點運行時間，但如果你只關心美感，它就可以了。

Answer 2

查看 Edoardo Guerrieros 的好建議，您還可以考慮使用rgba(0,0,0,0) ，其中最后一個數字設置顏色的不透明度。 這樣，您將使背景逐漸出現在矩形后面：

完整代碼：

import plotly.graph_objs as go

fig=go.Figure()

for i in range(100):
    opac = 1-(i/100)
    fig.add_shape(type='line',
    xref="x",
    yref="y",
    x0=2.5,
    x1=3.5,
    y0=i*(2/100),
    y1=i*(2/100),
    line=dict(color='rgba({}, {}, {}, {})'.format((0),(0),(255),(opac)),
              width=5,))



fig.update_xaxes(range=[2, 4])
fig.update_yaxes(range=[-1, 2.5])

fig.show()