如何动态添加文本注释并使其可在 Plotly Dash 中拖动

Question

我需要能够向图表添加和删除文本注释，并通过用鼠标拖动它们来放置它们。

我正在使用 python，我熟悉图像注释选项，但我不知道如何进行动态文本注释

Answer 1

使用 Plotly 可以实现可拖动注释。但是您必须释放Dash，并将您的绘图对象放入dcc.Graph组件中，并进行以下设置config：

config={
    'editable': True,
    'edits': {
        'annotationPosition': True
    }

就 而言"dynamic"，我的理解是您希望能够插入任意数量的注释。在回调中使用dcc.Input组件和 a非常简单。html.Button下面的应用程序是由下面的完整代码片段生成的。如果这是您可以使用的东西，我很乐意更多地研究有关如何清除注释的用户友好性。现在，如果注释的输入字段为空，fig1则将不带任何注释的初始图形返回到dcc.Graph组件。

达世币应用程序：

完整代码

import numpy as np
import pandas as pd
import plotly.express as px
import plotly.graph_objs as go

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, Input, Output, State, dash_table, ctx



# some random data
np.random.seed(42)
y = np.random.normal(0, 10, 50)
x = np.arange(0, 50)

app = Dash(external_stylesheets=[dbc.themes.SLATE])

# initial figure for the dcc.Graph component
fig1 = px.scatter(x=x, y=y)

# app layout
app.layout = dbc.Container([dbc.Row([dbc.Col([html.H1("Dynamic and draggable annotations",
                                                      style={"text-align": "center"}, ),
                                              dbc.Label(
                                                  'Annotation input field :   '),
                                              dcc.Input(
                                                  id='input_annotations', type='text', style={'width': '60%'}),
                                              html.Button(id='btn_submit', type='submit', children='Add annotation')])]),
                            dbc.Row([dbc.Col([dcc.Graph(
                                id='graph1',
                                figure=fig1,
                                config={
                                    'editable': True,
                                    'edits': {
                                        'shapePosition': True,
                                        'annotationPosition': True
                                    }
                                }
                            )])])])

# app interactivity
@app.callback(
    Output(component_id='graph1', component_property='figure'),
    Input(component_id='graph1', component_property='figure'),
    State(component_id='input_annotations', component_property='value'),
    Input('btn_submit', 'n_clicks')
)
def update_output_div(figure, annotations, n_clicks):

    # Get existing figure in dcc.Graph with id='graph1'
    # This lets you grap an existing figure with existing annotations
    # and add more annotations to it
    fig = go.Figure(figure)

    # if the input field is empty,
    # an initial figure is returned to id='graph1'
    try:
        print('trey')
        if len(annotations) != 0:
            fig.add_annotation(x=25, y=0,
                               text=annotations,
                               showarrow=True,
                               arrowcolor="black",
                               arrowsize=3,
                               arrowwidth=1,
                               arrowhead=1)

        else:
            return fig1
    except:
        return fig1
    return fig


if __name__ == '__main__':
    app.run_server(debug=True, port='8091')