Plotly：如何在同一个子图上显示 2 个以上的 x 轴标题/范围？

Question

我正在使用 Plotly 并使用共享 y 轴和不同的 x 轴制作散点图子图。我尝试使用图形对象 (fig['layout'][data index]) 语法来显示多个堆叠的 x 轴及其各自的范围。我仅通过将“顶部”和“底部”分配给图形布局的侧面属性来成功显示每个子图的两个 xaxes 和范围。下图中右起第二列应显示系列 T5、T6 和 T7 的标题/范围，但仅显示 T5 和 T7 的标题和范围。

是否可以在 Plotly 的同一个子图中显示 2 个以上的 x 轴标题/范围？对于实现的示例，Matplotlib 支持显示多个堆叠轴

感谢 Vestland，关键是使用图形布局的位置属性并缩放 y 轴以正确适应调整。请参阅下面的 [monstrosity]，了解基于 Vestland 示例代码的多轴的完整实现。

Answer 1

make_subplots(rows=1, cols=2)您需要,add_traces()和的精确组合fig.update_layout(xaxis=dict(domain=...)：

1. 使用fig=make_subplots(rows=1, cols=2)并包含两条迹线设置“常规”子图，如此处所述。

2. 使用它自己的 xaxis 添加第三条迹线fig.add_trace(go.Scatter([...[, xaxis="x3"))

3. 然后，调整子图 1 以便为xaxis3使用腾出空间：fig.update_layout(xaxis3=dict(anchor="free", overlaying="x1", position=0.0))

4. 使用进行一些最终调整fig.update_layout([...], yaxis2=dict(domain=[0.1, 1]))

您必须考虑的原因domain是因为position中的属性point 3不能为负，并且您必须以某种方式为双 x 轴腾出空间。结果如下：

阴谋

完整代码：

from plotly.subplots import make_subplots
import plotly.graph_objects as go

# initial subplot with two traces
fig = make_subplots(rows=1, cols=2)

fig.add_trace(
    go.Scatter(x=[1, 2, 3], y=[4, 5, 6]),
    row=1, col=1
)

fig.add_trace(
    go.Scatter(x=[20, 30, 40], y=[50, 60, 70]),
    row=1, col=2
)

fig.update_layout(height=600, width=800,
                  title_text="Subplots with shared x-axes")

# extra data where xaxis3 is shared with subplot 1
fig.add_trace(go.Scatter(
    x=[11, 12, 13],
    y=[6, 5, 4],
    name="xaxis3 data",
    xaxis="x3"
))

# some adjustmentns for xaxis3
fig.update_layout(xaxis3=dict(
        title="xaxis3 title",
        titlefont=dict(
            color="#9467bd"
        ),
        tickfont=dict(
            color="#9467bd"
        ),
        anchor="free",
        overlaying="x1",
        side="right",
        position=0.0
    ))

# extra data where xaxis4 is shared with subplot 2
fig.add_trace(go.Scatter(
    x=[50, 60, 70],
    y=[60, 60, 60],
    name="xaxis4 data",
    xaxis="x4",
    yaxis = 'y2'
))

# some adjustments for xaxis4
fig.update_layout(xaxis4=dict(
        title="xaxis4 title",
        titlefont=dict(
            color="#9467bd"
        ),
        tickfont=dict(
            color="#9467bd"
        ),
        anchor="free",
        overlaying="x2",
        side="right",
        position=0.0
    ))

# make room to display double x-axes
fig.update_layout(yaxis1=dict(domain=[0.1, 1]),
                  yaxis2=dict(domain=[0.1, 1]),
                 )

# not critical, but just to put a little air in there
fig.update_layout(xaxis1=dict(domain=[0.0, 0.4]),
                  xaxis2=dict(domain=[0.6, 1]),
                 )

fig.show()

编辑：缩小标题和范围之间的间距。

一种方法是使用以下方法更改标题本身的位置fig.update_layout(title=dict())：

fig.update_layout(
    title={
        'text': "Plot Title",
        'y':0.88,
        'x':0.42,
        'xanchor': 'left',
        'yanchor': 'top'})

地块2

图 2 的完整代码

from plotly.subplots import make_subplots
import plotly.graph_objects as go

# initial subplot with two traces
fig = make_subplots(rows=1, cols=2)

fig.add_trace(
    go.Scatter(x=[1, 2, 3], y=[4, 5, 6]),
    row=1, col=1
)

fig.add_trace(
    go.Scatter(x=[20, 30, 40], y=[50, 60, 70]),
    row=1, col=2
)

fig.update_layout(height=600, width=800,
                  title_text="Subplots with shared x-axes")

# extra data where xaxis3 is shared with subplot 1
fig.add_trace(go.Scatter(
    x=[11, 12, 13],
    y=[6, 5, 4],
    name="xaxis3 data",
    xaxis="x3"
))

# some adjustmentns for xaxis3
fig.update_layout(xaxis3=dict(
        title="xaxis3 title",
        titlefont=dict(
            color="#9467bd"
        ),
        tickfont=dict(
            color="#9467bd"
        ),
        anchor="free",
        overlaying="x1",
        side="right",
        position=0.0
    ))

# extra data where xaxis4 is shared with subplot 2
fig.add_trace(go.Scatter(
    x=[50, 60, 70],
    y=[60, 60, 60],
    name="xaxis4 data",
    xaxis="x4",
    yaxis = 'y2'
))

# some adjustments for xaxis4
fig.update_layout(xaxis4=dict(
        title="xaxis4 title",
        titlefont=dict(
            color="#9467bd"
        ),
        tickfont=dict(
            color="#9467bd"
        ),
        anchor="free",
        overlaying="x2",
        side="right",
        position=0.0
    ))

# make room to display double x-axes
fig.update_layout(yaxis1=dict(domain=[0.1, 1]),
                  yaxis2=dict(domain=[0.1, 1]),
                 )

# not critical, but just to put a little air in there
fig.update_layout(xaxis1=dict(domain=[0.0, 0.4]),
                  xaxis2=dict(domain=[0.6, 1]),
                 )

fig.update_layout(
    title={
        'text': "Plot Title",
        'y':0.88,
        'x':0.42,
        'xanchor': 'left',
        'yanchor': 'top'})

fig.show()