Plotly：如何在背景中为不同的 y 范围着色？

Question

我有以下情节：

import plotly 
import plotly.graph_objects as go

x1 = [ '2023-11-01','2023-11-02','2023-11-03','2023-11-04','2023-11-05',
       '2023-11-06','2023-11-07','2023-11-08','2023-11-09','2023-11-10' ]
y1 = [ 0.97, 0.70, 0.90,-1.52,-1.97,-0.18,-2.03,-0.07,-1.31, 0.75 ]
y2 = [-1.29,-1.12, 0.49,-0.13,-1.39, 0.79, 0.80, 0.53, 0.94, 0.10 ] 
y3 = [ 1.29, 0.12,-1.00, 1.13, 0.90,-1.22, 0.91, 1.53, 0.88,-0.17 ]
fig = go.Figure()
fig.add_trace(go.Scatter(x=x1, y=y1,mode='lines+markers', line_color='#8600ff',name='level 3'))
fig.add_trace(go.Scatter(x=x1, y=y2,mode='lines+markers', line_color="#23c6cc",name='level 1'))
fig.add_trace(go.Scatter(x=x1, y=y3,mode='lines+markers', line_color="#3176e0",name='level 2'))
fig.update_layout(showlegend=True,xaxis=dict(tickfont=dict(size=14, color='black')),)
fig.update_yaxes(
    range=(-3, 3),
    color='green'
)
fig.update_layout(
                  yaxis = dict(
                    tickmode='array', #change 1
                    tickvals = [4,3,2,1,0,-1,-2,-3,-4], #change 2
                    ticktext = ['4.0','3.0','2.0','1.0','Mean','1.0','2.0','3.0','4.0'], #change 3
                    ))
fig.show()

代码生成了我想要的图表，但我希望能够按如下方式更改背景：

这些颜色的十六进制代码如下：

#eeeeee light purple
#f5f5f5 lighter purple

你能告诉我如何修改上面的图表，使其背景看起来像图像吗？

Answer 1

这是我最大的努力。

方法

我考虑寻找一种方法来覆盖或更改背景属性，但我发现的最接近和最直观的选项是使用形状和布局对象。

由于我们想要着色的 y 轴范围是静态已知的，因此只需仔细将范围映射到覆盖背景中这些位置的矩形形状的尺寸即可。剩下的就是根据需要为边框着色。

这就是代码的样子。我必须稍微调整颜色，因为我相信它最接近您的屏幕截图，但是，您可以根据需要更正它们。

import plotly.graph_objects as go

color_map = {
    (-3,-2): "#d9d9d9", # "rgb(192, 192, 192, 0.1)",     # Dark Grey
    (-2,-1): "#e6e6e6", # "rgb(229, 228, 226, 0.1)",     # Grey
    (-1,0): "#f5f5f5", # "rgba(211, 211, 211, 1.0)",     # Light Grey
    (0,1): "#f5f5f5", # "rgba(211, 211, 211, 1.0)",      # Light Grey
    (1,2): "#e6e6e6", # "rgb(229, 228, 226, 0.1)",       # Grey
    (2,3): "#d9d9d9" # "rgb(192, 192, 192, 0.1)",       # Dark Grey
}

# Purple tints
light_purple = "rgba(224, 176, 255, 0.7)"  #"#E0B0FF"
lighter_purple = "rgba(224, 176, 255, 0.3)" #"#D8BFD8"

x1 = [ '2023-11-01','2023-11-02','2023-11-03','2023-11-04','2023-11-05',
       '2023-11-06','2023-11-07','2023-11-08','2023-11-09','2023-11-10' ]
y1 = [ 0.97, 0.70, 0.90,-1.52,-1.97,-0.18,-2.03,-0.07,-1.31, 0.75 ]
y2 = [-1.29,-1.12, 0.49,-0.13,-1.39, 0.79, 0.80, 0.53, 0.94, 0.10 ]
y3 = [ 1.29, 0.12,-1.00, 1.13, 0.90,-1.22, 0.91, 1.53, 0.88,-0.17 ]

x_max = max(x1)
_y_max = max([max(y) for y in (y1,y2,y3)])
_y_min = min([min(y) for y in (y1,y2,y3)])
y_intervals = [ (-3,-2), (-2,-1), (-1,0), (0,1), (1,2), (2,3) ]

# noinspection PyCallingNonCallable
layout = go.Layout(
    shapes=[
        {
            'type': 'rect',
            'x0': '2023-10-31',   # Start from the leftmost edge
            'y0': y[0],
            'x1': '2023-11-11',   # End at the rightmost edge
            'y1': y[1],
            'fillcolor': color_map[y],
            'layer': 'above',
            'opacity': 0.5,
            'line': {'width': 3, 'color': light_purple if (y[0] >= 2 or y[0] <= -2) else lighter_purple}
        }
        for y in color_map.keys()
    ]
)

fig = go.Figure()
fig.update_layout(layout)

fig.add_trace(go.Scatter(x=x1, y=y1,mode='lines+markers', line=dict(color='#8600ff'), name='level 3'))
fig.add_trace(go.Scatter(x=x1, y=y2,mode='lines+markers', line=dict(color="#23c6cc"), name='level 1'))
fig.add_trace(go.Scatter(x=x1, y=y3,mode='lines+markers', line=dict(color="#3176e0"), name='level 2'))
fig.update_layout(showlegend=True,xaxis=dict(tickfont=dict(size=14, color='black')),)
fig.update_yaxes(
    range=(-3, 3),
    color='green'
)
fig.update_layout(
                  yaxis = dict(
                    tickmode='array', #change 1
                    tickvals = [4,3,2,1,0,-1,-2,-3,-4], #change 2
                    ticktext = ['4.0','3.0','2.0','1.0','Mean','1.0','2.0','3.0','4.0'], #change 3
                    ))

fig.show()

输出：