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

Question

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

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

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

Answer 1

编辑：

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

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]

原始答案：绘制矩形后，您可以单击它的实际周长，它的顶点可以拖动。 这样，当您缩小时，您可以调整矩形的高度。

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