Plotly - 在每个图表的顶部添加标注或在顶部添加第三个图表

Plotly - Add Call out at top of each graph or add third graph on top

我有以下 plotly 代码,可以绘制简单的条形图和折线图

fig = go.Figure()
fig = make_subplots(specs=[[{"secondary_y": True}]])

fig.add_trace(
    go.Scatter(
        name         = 'CPA',
        marker_color = '#FD009D', 
        x            = pay_wk_cpa['Week'].dt.strftime('%d %b'),
        y            = pay_wk_cpa['CPA - Pay'],
        text         = pay_wk_cpa['CPA - Pay'],
        mode         = 'lines+markers+text',
        textposition = 'top center',
        textfont     = dict(
        family       = "Arial",
#        color        = '#000',
#        size         = 25
            )),
    secondary_y  = True
)

fig.add_trace(
    go.Bar(
        name         = "Registrazioni - Pay",
        marker_color = '#5B27A1', 
        x            = pay_wk_cpa['Week'].dt.strftime('%d %b'),
        y            = pay_wk_cpa['Registrazione - Pay'],
        text         = pay_wk_cpa['Registrazione - Pay'],
        textposition = 'inside',
        textfont     = dict(
        family       = "Arial",
#        color        = '#000',
#        size         = 25
                            )
                            ),
     secondary_y  = False
)

fig.update_traces(texttemplate='%{text:.2s}')

fig.update_layout(
    showlegend          = True,
    paper_bgcolor       = "rgba(0,0,0,0)",
    plot_bgcolor        = "rgba(0,0,0,0)",
    margin              = dict(
    t                   = 50,
    l                   = 10,
    b                   = 10,
    r                   = 10),
    #xaxis_tickfont_size = 28,
    font_color          = '#000',
    width               = 900, 
    height              = 500,
    legend              = dict(
    yanchor             = "top",
    y                   = 1.4,
    xanchor             = "left",
    x                   = 0.01,
    title               = '',
    orientation         = 'h',
    font                = dict(
    family              = "Arial", 
    #size                = 25, 
    #color               = "black"
    )))

fig.update_yaxes(visible=False)
fig.show()

结果是这样的

我现在想从我的 df 的 pay_wk_cpa['Spend'] 列向图表添加一个额外的层。结果应该是这样的(通过将 100% 条形图放在我的图表之上,使用 excel 创建)

我需要添加什么来创建这个额外的图层?我似乎无法弄清楚。

  • 这可以通过针对额外的 yaxis (y3) 添加额外的条形轨迹来实现
  • plus 配置所有三个domain yaxis

测试数据

pay_wk_cpa = pd.DataFrame(
    {
        "Week": pd.date_range("14-jun-2021", freq="W", periods=13),
        "CPA - Pay": np.random.uniform(10, 32, 13),
        "Registrazione - Pay": np.random.uniform(180, 1100, 13),
        "Spend": np.random.uniform(1000, 30000, 13),
    }
)

添加跟踪

# add another trace with constant y values and required text
fig.add_traces(
    go.Bar(
        name="Registrazioni - Pay",
        marker_color="#5B27A1",
        x=pay_wk_cpa["Week"].dt.strftime("%d %b"),
        y=np.full(len(pay_wk_cpa), 1),
        text=pay_wk_cpa["Spend"],
        textposition="inside",
        yaxis="y3",
        textfont=dict(
            family="Arial",
        ),
    ),
)

配置所有y轴

# set domains of all three yaxis
fig.update_layout(
    yaxis={
        "domain": [0, 0.95],
    },
    yaxis2={
        "domain": [0, 0.95],
    },
    yaxis3={"domain": [0.95, 1], "visible": False},
)

完整的解决方案

from plotly.subplots import make_subplots

pay_wk_cpa = pd.DataFrame(
    {
        "Week": pd.date_range("14-jun-2021", freq="W", periods=13),
        "CPA - Pay": np.random.uniform(10, 32, 13),
        "Registrazione - Pay": np.random.uniform(180, 1100, 13),
        "Spend": np.random.uniform(1000, 30000, 13),
    }
)

fig = go.Figure()
fig = make_subplots(specs=[[{"secondary_y": True}]])

fig.add_trace(
    go.Scatter(
        name="CPA",
        marker_color="#FD009D",
        x=pay_wk_cpa["Week"].dt.strftime("%d %b"),
        y=pay_wk_cpa["CPA - Pay"],
        text=pay_wk_cpa["CPA - Pay"],
        mode="lines+markers+text",
        textposition="top center",
        textfont=dict(
            family="Arial",
        ),
    ),
    secondary_y=True,
)

fig.add_trace(
    go.Bar(
        name="Spend",
        marker_color="#5B27A1",
        x=pay_wk_cpa["Week"].dt.strftime("%d %b"),
        y=pay_wk_cpa["Spend"],
        text=pay_wk_cpa["Spend"],
        textposition="inside",
        textfont=dict(
            family="Arial",
        ),
    ),
    secondary_y=False,
)

# add another trace with constant y values and required text
fig.add_traces(
    go.Bar(
        name="Registrazioni - Pay",
        marker_color="#5B27A1",
        x=pay_wk_cpa["Week"].dt.strftime("%d %b"),
        y=np.full(len(pay_wk_cpa), 1),
        text=pay_wk_cpa["Spend"],
        textposition="inside",
        yaxis="y3",
        textfont=dict(
            family="Arial",
        ),
    ),
)

fig.update_traces(texttemplate="%{text:.2s}")

fig.update_layout(
    showlegend=True,
    paper_bgcolor="rgba(0,0,0,0)",
    plot_bgcolor="rgba(0,0,0,0)",
    margin=dict(t=50, l=10, b=10, r=10),
    # xaxis_tickfont_size = 28,
    font_color="#000",
    width=900,
    height=500,
    legend=dict(
        yanchor="top",
        y=1.4,
        xanchor="left",
        x=0.01,
        title="",
        orientation="h",
        font=dict(
            family="Arial",
        ),
    ),
)

fig.update_yaxes(visible=False)
# set domains of all three yaxis
fig.update_layout(
    yaxis={
        "domain": [0, 0.95],
    },
    yaxis2={
        "domain": [0, 0.95],
    },
    yaxis3={"domain": [0.95, 1], "visible": False},
)