Plotly-Dash: Comment coder des rappels interactifs pour les fonctions de survol dans plotly dash

Question

Est-il possible d'avoir un champ de texte au bas d'un graphique en tiret qui affiche le texte du point sur lequel ils se trouvent (montrant les données de survol sous forme de texte brut). Ainsi, la zone de texte pourra apporter des modifications lorsque les utilisateurs survoleront un certain point. J'ai défini un composant dcc.Graph et la disposition de l'application, mais je ne sais pas comment définir la fonction de rappel pour les données hoverdata.

J'ai utilisé le code ci-dessous pour définir dcc.Graph et 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'})
])

Toute aide avec le rappel sera excellente. Merci d'avance

Answer 1

Oui, c'est très possible! Comme vous n'avez pas fourni de description complète de votre configuration, j'ai rassemblé un exemple minimal qui s'appuie sur des éléments de dash.plotly.com/interactive-graphing ethttps://community.plotly.com/: Use Hover Trace As Input for Callbackqui décrit entre autres l'utilisation de données de survol dans les rappels. L'extrait de code ci-dessous produira l'application suivante pour JupyterDash. Si vous souhaitez exécuter une application de tableau de bord standard, réécrivez-la simplement en suivant ces étapes .

La solution que j'ai mise en place doit faire exactement ce que vous visez. Chaque fois que vous survolez un point sur l'une des lignes de la figure du composant dcc.Graph , un ensemble de détails sur la trace s'affiche dans le composant html.Pre en dessous, comme les valeurs x et y. Essayez-le et dites-moi comment cela fonctionne pour vous!

Application 1:

Si vous souhaitez récupérer uniquement certains éléments de la sortie, vous pouvez sous-définir la sortie comme ceci:

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

App 2:

Code complet pour 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)

Code complet pour 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)