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/

我猜答案很简单，就是“不支持”，但也许有人知道得更好。

- David Parks

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,
            ))

结果如下：

我知道这种做法不太实用，而且可能会稍微增加运行时间，但如果你只关心美观效果的话，它是可行的。

- Edoardo Guerriero

---

不错的解决方法，我喜欢它。那正是我想要的效果。为了（稍微）提高性能而做出的权衡已经注意到了。我会再多留一点时间来看是否有其他解决方案，但这个确实不错。 - David Parks

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()

- vestland