将带有文本的vrect添加到Plotly Express中,并使用按钮。

huangapple go评论78阅读模式
英文:

Add vrect with text to plotly express with button

问题

我有以下代码用于在Plotly Express中创建垂直矩形:

fig.add_vrect(
    x0 = '2020-04',
    x1 = '2020-09',
    fillcolor="red",
    opacity=0.25
)

我想要创建一个按钮,使用户能够切换矩形的显示和隐藏,当它处于显示状态时,中间会显示一些文本。我希望它们默认处于隐藏状态。

英文:

I have the following code for a vertical rectangle in plotly express:

fig.add_vrect(
    x0 = '2020-04',
    x1 = '2020-09',
    fillcolor="red",
    opacity=0.25
)

I would like to make a button where the user can toggle with rectangle on and off, and when it's on there's some text in the middle. I would like them to be off by default.

答案1

得分: 1

您可以使用字典来创建矩形形状和矩形注释,然后将它们用作按钮的参数。一些细节:我们在按钮中使用"relayout"方法,因为切换形状和文本注释意味着我们只是更改布局,而argsargs2告诉按钮在切换打开/关闭时如何行为。

编辑:为了保留图表上的另一个形状(比如vline),您可以将vline添加到按钮的args和args2中,这样在切换按钮时vline将保留。

import plotly.express as px

fig = px.scatter(
    x=['2020-01-30', '2020-04-01', '2020-04-01','2020-09-01'],
    y=[3,2,3,2]
)

fig.add_vline(
    x='2020-02',
    line_dash='dash'
)

vline_shape = [dict(
    type='line',
    x0='2020-02',
    x1='2020-02',
    xref='x',
    y0=0,
    y1=1,
    yref='y domain',
    line= {'dash': 'dash'}
)]

rectangle_shape = [dict(
    type='rect',
    x0='2020-04',
    x1='2020-09',
    xref='x',
    y0=0,
    y1=1,
    yref='y domain',
    fillcolor='red',
    opacity=0.25
)]

rectangle_annotation = [dict(
    showarrow=False,
    x='2020-06-15',
    y=2.5,
    text="Selected Time Period"
)]

fig.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            buttons=[
                dict(label="Toggle Rectangle",
                     method="relayout",
                     args=[{
                        "shapes": rectangle_shape + vline_shape, 
                        "annotations": rectangle_annotation}],
                     args2=[{
                        "shapes": vline_shape, 
                        "annotations": []}]),
                # dict(label="Untoggle Rectangle",
                #      method="relayout",
                #      args=["shapes", []]),
            ],
        )
    ]
)

fig.show()

将带有文本的vrect添加到Plotly Express中,并使用按钮。

英文:

You can use dictionaries to create your rectangle shape and rectangle annotation and then use these as arguments for a button. A few details: we use the "relayout" method for buttons because toggling a shape and text annotation means we are only changing the layout, and args and args2 tells the button how to behave when toggled on/off.

Edit: in order to keep another shape (like a vline) on the figure, you can add the vline to both args and args2 of your button so the vline remains when the button is toggled

import plotly.express as px

fig = px.scatter(
    x=['2020-01-30', '2020-04-01', '2020-04-01','2020-09-01'],
    y=[3,2,3,2]
)

fig.add_vline(
    x='2020-02',
    line_dash='dash'
)

vline_shape = [dict(
    type='line',
    x0='2020-02',
    x1='2020-02',
    xref='x',
    y0=0,
    y1=1,
    yref='y domain',
    line= {'dash': 'dash'}
)]

rectangle_shape = [dict(
    type='rect',
    x0='2020-04',
    x1='2020-09',
    xref='x',
    y0=0,
    y1=1,
    yref='y domain',
    fillcolor='red',
    opacity=0.25
)]

rectangle_annotation = [dict(
    showarrow=False,
    x='2020-06-15',
    y=2.5,
    text="Selected Time Period"
)]

fig.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            buttons=[
                dict(label="Toggle Rectangle",
                     method="relayout",
                     args=[{
                        "shapes": rectangle_shape + vline_shape, 
                        "annotations": rectangle_annotation}],
                     args2=[{
                        "shapes": vline_shape, 
                        "annotations": []}]),
                # dict(label="Untoggle Rectangle",
                #      method="relayout",
                #      args=["shapes", []]),
            ],
        )
    ]
)

fig.show()

将带有文本的vrect添加到Plotly Express中,并使用按钮。

huangapple
  • 本文由 发表于 2023年2月8日 17:56:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/75384040.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定