javascript - 我可以使用 Plotly 的自定义按钮来更新多面图中的 `shared_yaxes` 吗？

Question

我正在使用 plotly，我有一个带有子图的图形。我想在其中包含一个按钮来切换属性 shared_yaxes。这可能吗？

这是一个可重现的例子(在 python 中)。考虑 official simple subplot example :

from plotly.subplots import make_subplots
import plotly.graph_objects as go
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)

这会产生:

现在，您可以简单地使用 make_subplots 的 shared_yaxes 参数在两个图上强制使用相同的 y 尺度。

from plotly.subplots import make_subplots
import plotly.graph_objects as go
fig = make_subplots(rows=1, cols=2, shared_yaxes=True)
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)

然后你得到:

现在我想包含一个自定义控件(最好是一个复选框)来切换该属性(我已经使用 R 和 Shiny 完成了此操作，但现在我想要这个基于绘图的解决方案)。

我试过 custom buttons ，例如使用下面的代码，但我无法使其工作。

fig.update_layout(updatemenus=[
    go.layout.Updatemenu(type="buttons",
                         direction="left",
                         buttons=list([
                             dict(args=[{
                                 "shared_yaxes": True
                             }],
                                  label="Shared axes",
                                  method="relayout"),
                             dict(args=[{
                                 "shared_yaxes": False
                             }],
                                  label="Independent axes",
                                  method="relayout")
                         ]),
                         xanchor="left",
                         yanchor="top"),
])

如有任何让它发挥作用的想法，我们将不胜感激。

Answer 1

您可以通过在 'matches': 'y' 和 'matches': None 之间切换来实现 'yaxis2'设置如下:

输出 1:

输出 2:

代码:

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

# plotly basic setup
fig = make_subplots(rows=1, cols=2, shared_yaxes=True)
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)

# plotly figure updates
fig.update_layout(
    updatemenus=[
        go.layout.Updatemenu(buttons=list([
            dict(label='Shared',
                 method='relayout',
                 args=['yaxis2', {'anchor': 'x2', 'domain': [0.0, 1.0],
                                  'matches': 'y', 'showticklabels': False}]),
            dict(label='Not shared',
                 method='relayout',
                 args=['yaxis2', {'anchor': 'x2', 'domain': [0.0, 1.0],
                                  'matches': None, 'showticklabels': True}]),
        ]),
        )
    ]
)

fig.show()

---

编辑:这是一个应该符合您的按钮首选项的设置:

代码:

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

# plotly basic setup
fig = make_subplots(rows=1, cols=2, shared_yaxes=True)
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)

# plotly figure updates
fig.update_layout(
    updatemenus=[
        go.layout.Updatemenu(type='buttons',
                             direction='left',
                             xanchor='left',
                             yanchor='top',
                             buttons=list([
                                    dict(label='Shared axes',
                                         method='relayout',
                                         args=['yaxis2', {'anchor': 'x2', 'domain': [0.0, 1.0],
                                                          'matches': 'y', 'showticklabels': False}]),
                                    dict(label='Independent axes',
                                         method='relayout',
                                         args=['yaxis2', {'anchor': 'x2', 'domain': [0.0, 1.0],
                                                          'matches': None, 'showticklabels': True}]),
                                            ]),
        )
    ]
)

fig.show()