Dash / Plotly 在图形中绘制 vrect 或更改绘制矩形的高度

Question

我目前正在 Dash 中构建一个时间序列标记工具，为此我正在使用图中的 plotly inbuild drawrect 函数，如下所示：

fig.update_layout(dragmode='drawrect', newshape={
        "drawdirection": "vertical",
        "layer": "below",
        "fillcolor": "green",
        "opacity": 0.25,
        "line": {
            "width": 0
        }
    })

这是完美的，但有一个缺陷，绘制的矩形仅与当前缩放一样高，如果缩小，它不会再垂直填满整个屏幕。
我已经看到 plotly 能够绘制 vrects 这正是我想要的，但我不知道如何用鼠标绘制它们。有没有一种方法可以指定高度，或者有一种方法可以在有人绘制矩形时立即将高度更改为无限？

Answer 1

编辑:

要在绘制时生成无限高的矩形，可以在绘制常规矩形时触发回调，捕获其X-coordinates，删除布局以移除该矩形，然后绘制一个vrect将具有相同的 x-coordinates 但会无限高。这是一个例子：

app.layout = html.Div([
    dcc.Graph(
        id="sensor-graph",
        config={
            'modeBarButtonsToAdd': [
                "drawrect",
                "eraseshape"
            ]
        },
    ),
])

@app.callback(
    [
        Output('sensor-graph', 'figure')
    ],
    Input("sensor-graph", "relayoutData"),
    [State('sensor-graph', 'figure')],
    prevent_initial_call=True
)
def on_new_annotation(relayout_data, fig):
    figu = go.Figure(fig)
    # Check if the changed layout in the graph is a drawn shape
    if fig is not None and "shapes" in relayout_data:
        # Remove the original rectangle
        figu.layout = {}
        # Add an infinitely high rectangle, using the original rectangle's x-coords
        figu.add_vrect(x0=relayout_data["shapes"][0]["x0"], x1=relayout_data["shapes"][0]["x1"])
    return [figu]

原回答: 画好矩形后，点击它的实际周长，它的顶点变成drag-able。这样，当您缩小时，您可以调整矩形的高度。

以下是使用拖动功能更改其高度的示例：

Dash / Plotly 在图形中绘制 vrect 或更改绘制矩形的高度

Dash / Plotly draw vrect in graph or change drawn rectangle's height

python

plotly

plotly-dash

dashboard