在筆記本中訪問 plotly 圖形重新布局數據

Question

有沒有辦法在 jupyter notebook/lab 中訪問圖形重新布局數據？

我的意思是：

import plotly.graph_objects as go

# Define the figure
fig = (go.Figure(
    go.Scatter(
        x=[0, 1, 2, 3],
        y=[-1, 1, -2, 2]
       )
    )
    .update_layout(
        modebar_add=['drawrect']
    )
)

# Show the figure
fig.show()
# Now do some drawing in the figure here! 

# Next cell I would like to access the shapes

我知道使用破折號回調是可能的，就像這里一樣。

Answer 1

如果您願意在 JupyterDash 中使用Plotly Dash並且將app.run_server()的mode屬性設置為'inline' ，則可以相當容易地做到這一點。

下面是一個筆記本的圖像，其中包含第二個單元格中繪制的線條的完整信息。 下面包含您的圖形的完整設置，並建立在Image annotations with Dash的眾多示例之一之上。

如果這是您可以使用的東西，我很樂意更詳細地解釋事情。

完整代碼：

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_html_components as html
from jupyter_dash import JupyterDash
import plotly.express as px
import plotly.graph_objects as go
import json

app = JupyterDash(external_stylesheets=[dbc.themes.BOOTSTRAP])

fig = (go.Figure(
    go.Scatter(
        x=[0, 1, 2, 3],
        y=[-1, 1, -2, 2]
       )
    ))

fig.update_layout(dragmode="drawline")
config = {
    "modeBarButtonsToAdd": [
        "drawline",
        "drawopenpath",
        "drawclosedpath",
        "drawcircle",
        "drawrect",
        "eraseshape",
    ]
}

app.layout = html.Div(
    [
        html.H4(
            "Draw a line"
        ),
        dcc.Graph(id="graph1", figure=fig, config=config),
        # dcc.Markdown("Characteristics of shapes"),
        html.Pre(id="annotations-data-pre"),
    ]
)

@app.callback(
    Output("annotations-data-pre", "children"),
    Input("graph1", "relayoutData"),
    prevent_initial_call=True,
)
def on_new_annotation(relayout_data):
    if "shapes" in relayout_data:
        global relayoutdata
        relayoutdata = json.dumps(relayout_data["shapes"], indent=2)
        return ''
    else:
        return dash.no_update

app.run_server(mode='inline', port=8002)