密谋:如何在两条垂直线之间设置填充颜色?

时间:2020-08-19 19:53:46

标签: python plotly fill low-level-api

使用matplotlib,我们可以使用fill_between()“平凡”地填充两条垂直线之间的区域,如示例所示:

https://matplotlib.org/3.2.1/gallery/lines_bars_and_markers/fill_between_demo.html#selectively-marking-horizontal-regions-across-the-whole-axes

使用matplotlib,我可以满足需要:

enter image description here

我们有两个信号,我正在计算皮尔逊和斯皮尔曼的滚动/运动相关性。当相关性低于-0.5或高于0.5时,我想对周期进行阴影处理(蓝色表示皮尔逊,橙色表示斯皮尔曼)。在所有情节中,我还将周末都设为灰色。

但是,我很难使用Plotly完成相同的任务。知道如何在两条水平线之间进行操作也将很有帮助。

请注意,我正在使用Plotly和Dash来加速多个图的可视化。用户要求一种更“动态的事物”。但是,我不是GUI专家,尽管我需要向他们提供初步的结果,但不能花时间在上面。

顺便说一句,我过去曾尝试过Bokeh,但由于某种原因我不记得了,放弃了。由于我可以从Python或R(这是我的主要开发工具)中使用,因此显示出良好的外观。

谢谢

卡洛斯

2 个答案:

答案 0 :(得分:4)

我认为没有任何等效于matplotlib的fill_between()方法的内置Plotly方法。但是,您可以绘制形状,因此可能的解决方法是绘制一个灰色矩形并设置参数layer="below",以使信号仍然可见。您还可以将矩形的坐标设置为超出轴范围,以确保矩形延伸到绘图的边缘。

您可以通过绘制矩形并以类似方式设置轴范围来填充水平线之间的区域。

import numpy as np
import plotly.graph_objects as go

x = np.arange(0, 4 * np.pi, 0.01)
y = np.sin(x)

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=x,
    y=y
))

# hard-code the axes
fig.update_xaxes(range=[0, 4 * np.pi])
fig.update_yaxes(range=[-1.2, 1.2])

# specify the corners of the rectangles
fig.update_layout(
    shapes=[
    dict(
        type="rect",
        xref="x",
        yref="y",
        x0="4",
        y0="-1.3",
        x1="5",
        y1="1.3",
        fillcolor="lightgray",
        opacity=0.4,
        line_width=0,
        layer="below"
    ),
    dict(
        type="rect",
        xref="x",
        yref="y",
        x0="9",
        y0="-1.3",
        x1="10",
        y1="1.3",
        fillcolor="lightgray",
        opacity=0.4,
        line_width=0,
        layer="below"
    ),
    ]
)

fig.show()

enter image description here

答案 1 :(得分:4)

您尚未提供数据示例,因此我将使用综合时间序列向您展示如何使用自定义函数{{ 1}}


两条垂直线之间有一个填充,很快就会变成一个矩形。使用bgLevel可以轻松地将矩形添加为形状。下面的示例将向您展示如何查找特定标准的特定时间段的开始和结束日期。在您的情况下,这些条件是变量的值是高于还是低于某个特定水平。

fig.add_shape中使用形状而不是迹线将使您定义使用fig.add_trace()来绘制图层的位置。使用layer='below'可以轻松隐藏形状轮廓。

图1:带有随机数据的时间序列图:

enter image description here

图2: line=dict(color="rgba(0,0,0,0))时,背景设置为不透明的灰色:

enter image description here

图2:,当A > 100

时,背景也设置为不透明的红色

enter image description here

完整代码:

D < 60