英文:
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"
方法,因为切换形状和文本注释意味着我们只是更改布局,而args
和args2
告诉按钮在切换打开/关闭时如何行为。
编辑:为了保留图表上的另一个形状(比如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()
英文:
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()
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论