Plotly：如何在 Plotly 中绘制具有渐变颜色的矩形？

Posted 2023-02-18

【中文标题】Plotly：如何在 Plotly 中绘制具有渐变颜色的矩形？

【英文标题】：Plotly: How to plot rectangle with gradient color in Plotly?

【发布时间】：2020-07-12 16:33:27

【问题描述】：

像矩形这样的形状在 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/

我的猜测是答案是简单的“不支持”，但也许其他人更清楚。

【参考方案1】：

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

【参考方案2】：

如果我错了，有人会纠正我，但我认为不，没有直接的实现来填充渐变形状。但要获得类似的结果，您可以在矩形内绘制几条线，指定递减的 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,
            ))

结果是：

我知道这是不切实际的，而且它会增加一点运行时间，但如果你只关心美学，它就可以完成这项工作。

【讨论】：

不错的解决方法，我喜欢它。这正是我想要的样子。 （一点）性能的权衡是众所周知的。我会把这个问题留得更久，看看是否有其他解决方案，但这是一个很好的解决方案。