Plotly-Dash: come codificare callback interattivi per funzioni hover in plotly dash

Question

È possibile avere un campo di testo nella parte inferiore di un grafico in trattino che visualizza il testo per il punto in cui si trovano (mostrando i dati al passaggio del mouse come testo normale). Quindi la casella di testo sarà in grado di apportare modifiche quando gli utenti passano il mouse su un certo punto. Ho definito un componente dcc.Graph e il layout dell'app, ma non sono sicuro di come definire la funzione di callback per hoverdata.

Ho usato il codice seguente per definire dcc.Graph e app.layout

fig = go.Figure(data=plot_data, layout=plot_layout)

app.layout = html.Div([
    dcc.Graph(figure=fig),
    
        html.Div([
                    dcc.Markdown(id='mpg-metrics')
                ],style={'width':'20%','display':'inline-block'})
])

Qualsiasi aiuto con la richiamata sarà fantastico. Grazie in anticipo

Answer 1

Sì, è molto possibile! Dal momento che non hai fornito una descrizione completa della tua configurazione, ho messo insieme un esempio minimo che attinge agli elementi di dash.plotly.com/interactive-graphing ehttps://community.plotly.com/: Use Hover Trace As Input for Callbackche tra le altre cose descrive l'uso dei dati al passaggio del mouse nei callback. Lo snippet di codice seguente produrrà la seguente app per JupyterDash. Se desideri eseguire un'app Dash standard, riscrivila seguendo questi passaggi .

La soluzione che ho messo insieme dovrebbe fare esattamente quello a cui miri. Ogni volta che si passa con il mouse su un punto su una delle linee nella figura nel componente dcc.Graph , viene visualizzato un insieme di dettagli sulla traccia nel componente html.Pre sottostante, come i valori xey. Provalo e fammi sapere come funziona per te!

App 1:

Se desideri recuperare solo alcuni elementi dell'output, puoi subsetare l'output in questo modo:

json.dumps({'Date:':hoverData['points'][0]['x'],
            'Value:':hoverData['points'][0]['y']}, indent = 2)

App 2:

Codice completo per JupyterDash, App1

import json
from textwrap import dedent as d
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# app info
app = JupyterDash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

# data and basic figure
x = np.arange(20)+10

fig = go.Figure(data=go.Scatter(x=x, y=x**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=x**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

Codice completo per JupyterDash, App2

import json
from textwrap import dedent as d
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# app info
app = JupyterDash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

# data and basic figure
y = np.arange(100)+10
x = pd.date_range(start='1/1/2021', periods=len(y))

fig = go.Figure(data=go.Scatter(x=x, y=y**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=y**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    try:
        return json.dumps({'Date:':hoverData['points'][0]['x'],
                           'Value:':hoverData['points'][0]['y']}, indent = 2)
    except:
        return None

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)