0
votes

Comment obtenir le niveau de zoom dans les données de séries chronologiques comme entrée de rappel dans Dash

Étant donné un graphique linéaire avec des données de série chronologique dans le tableau de bord Dash (Plotly), lorsque je zoome et que la résolution de l'axe des x (horodatage) change, comment puis-je capturer cela en tant qu'entrée d'un autre rappel?

Ce que je veux réaliser, c'est plot-B affichant des données basées sur le zoom dans plot-A. Lorsque plot-A effectue un zoom avant, plot-B suit automatiquement.

Notez que plot-A et plot-B utilisent un ensemble de données différent, avec des horodatages correspondants.

plotly visualization dashboard plotly-dash

0 commentaires

3 Réponses :

0
votes

Les documents Dash ont une réponse à cela ici .

relayoutData
Données du dernier événement de relais qui se produit lorsque l'utilisateur effectue un zoom ou un panoramique sur le tracé ou d'autres modifications au niveau de la disposition. A la forme {:} décrivant les modifications apportées. Lecture seulement.

Malheureusement, en lecture seule, vous ne pourrez pas mettre à jour le deuxième graphique pour suivre le zoom sur le premier.

2 commentaires

Merci, il est utile de connaître relayoutData. Je pense qu'il existe plusieurs façons de prendre ces données en lecture seule et de les utiliser pour mettre à jour l'autre graphique. Soit par les données, soit par les propriétés des axes du graphique?

S'il y en a, ce n'est pas quelque chose que je connais.

5
votes

Exemple de code pour synchroniser le niveau de zoom en tiret tracé.

app=dash.Dash()

app.layout = html.Div([
                dcc.Graph(id='graph',figure=fig),
                html.Pre(id='relayout-data', style=styles['pre']),
                dcc.Graph(id='graph2', figure=fig)])

@app.callback(Output('relayout-data', 'children'),
              [Input('graph', 'relayoutData')])
def display_relayout_data(relayoutData):
    return json.dumps(relayoutData, indent=2)


@app.callback(Output('graph2', 'figure'),
             [Input('graph', 'relayoutData')], # this triggers the event
             [State('graph2', 'figure')])
def graph_event(select_data,  fig):
    try:
       fig['layout'] = {'xaxis':{'range':[select_data['xaxis.range[0]'],select_data['xaxis.range[1]']]}}
    except KeyError:
       fig['layout'] = {'xaxis':{'range':[zoomed out value]}}
return fig

app.run_server()

1 commentaires

Votre solution écrase malheureusement la mise en page complète de la figure dans la fonction de rappel. J'ai écrit une réponse améliorée sur stackoverflow.com/a/64891612/179014 .

0
votes

Voici une version améliorée du rappel basée sur la réponse de @Sachin Dev Sharma:

@app.callback([Output('graph2', 'figure')],
         [Input('graph', 'relayoutData')], # this triggers the event
         [State('graph2', 'figure')])
def zoom_event(relayout_data, *figures):
    outputs = []
    for fig in figures:
        try:
            fig['layout']["xaxis"]["range"] = [relayout_data['xaxis.range[0]'], relayout_data['xaxis.range[1]']]
            fig['layout']["xaxis"]["autorange"] = False
        except (KeyError, TypeError):
            fig['layout']["xaxis"]["autorange"] = True

        outputs.append(fig)

    return outputs

L'avantage ici est que nous n'écrasons pas la mise en page complète de la figure dans le rappel. Nous xaxis.range xaxis.autorange propriétés xaxis.range et xaxis.autorange . Cette solution permet également de définir le zoom sur plusieurs chiffres de sortie en acceptant plusieurs arguments de figure (voir *figures ).

0 commentaires