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]

原始答案：繪制矩形后，您可以單擊它的實際周長，它的頂點可以拖動。 這樣，當您縮小時，您可以調整矩形的高度。

這是使用拖動功能更改其高度的示例：