Plotly - Ajout de la liste déroulante de boutons

Plotly fournit un haut degré d'interactivité grâce à l'utilisation de différents contrôles sur la zone de traçage - tels que des boutons, des listes déroulantes et des curseurs, etc. Ces contrôles sont incorporés avec updatemenuattribut de la disposition du tracé. Vous pouvezadd button et son comportement en spécifiant la méthode à appeler.

Il existe quatre méthodes possibles qui peuvent être associées à un bouton comme suit -

  • restyle - modifier les données ou les attributs de données

  • relayout - modifier les attributs de mise en page

  • update - modifier les données et les attributs de mise en page

  • animate - démarrer ou mettre en pause une animation

le restyle la méthode doit être utilisée lorsque modifying the data and data attributesdu graphique. Dans l'exemple suivant, deux boutons sont ajoutés parUpdatemenu() méthode à la mise en page avec restyle méthode.

go.layout.Updatemenu(
type = "buttons",
direction = "left",
buttons = list([
   dict(args = ["type", "box"], label = "Box", method = "restyle"),
   dict(args = ["type", "violin"], label = "Violin", method = "restyle" )]
))

Valeur de type la propriété est buttonspar défaut. Pour rendre une liste déroulante de boutons, changez le type endropdown. Une trace Box ajoutée à l'objet Figure avant de mettre à jour sa mise en page comme ci-dessus. Le code complet qui rendboxplot et violin plot en fonction du bouton cliqué, se présente comme suit -

import plotly.graph_objs as go
fig = go.Figure()
fig.add_trace(go.Box(y = [1140,1460,489,594,502,508,370,200]))
fig.layout.update(
   updatemenus = [
      go.layout.Updatemenu(
         type = "buttons", direction = "left", buttons=list(
            [
               dict(args = ["type", "box"], label = "Box", method = "restyle"),
               dict(args = ["type", "violin"], label = "Violin", method = "restyle")
            ]
         ),
         pad = {"r": 2, "t": 2},
         showactive = True,
         x = 0.11,
         xanchor = "left",
         y = 1.1,
         yanchor = "top"
      ), 
   ]
)
iplot(fig)

La sortie du code est donnée ci-dessous -

Cliquer sur Violin bouton pour afficher le Violin plot.

Comme mentionné ci-dessus, la valeur de type entrer Updatemenu() la méthode est attribuée dropdownpour afficher la liste déroulante des boutons. Le tracé apparaît comme ci-dessous -

le updatedoit être utilisée lors de la modification des sections de données et de mise en page du graphique. L'exemple suivant montre comment mettre à jour et quelles traces sont affichées tout en mettant à jour simultanément les attributs de mise en page, tels que le titre du graphique. Deux traces Scatter correspondant àsine and cos wave sont ajoutés à Figure object. La trace avec visibleattribute comme True sera affiché sur le tracé et les autres traces seront masquées.

import numpy as np
import math #needed for definition of pi

xpoints = np.arange(0, math.pi*2, 0.05)
y1 = np.sin(xpoints)
y2 = np.cos(xpoints)
fig = go.Figure()
# Add Traces
fig.add_trace(
   go.Scatter(
      x = xpoints, y = y1, name = 'Sine'
   )
)
fig.add_trace(
   go.Scatter(
      x = xpoints, y = y2, name = 'cos'
   )
)
fig.layout.update(
   updatemenus = [
      go.layout.Updatemenu(
         type = "buttons", direction = "right", active = 0, x = 0.1, y = 1.2,
         buttons = list(
            [
               dict(
                  label = "first", method = "update",
                  args = [{"visible": [True, False]},{"title": "Sine"} ]
               ),
               dict(
                  label = "second", method = "update", 
                  args = [{"visible": [False, True]},{"title": Cos"}]
               )
            ]
         )
      )
   ]
)
iplot(fig)

Initialement, Sine curvesera affiché. Si vous cliquez sur le deuxième bouton,cos trace apparaît.

Notez que chart title met également à jour en conséquence.

Pour utiliser animate méthode, nous devons ajouter un ou plusieurs Frames to the Figureobjet. En plus des données et de la mise en page, des cadres peuvent être ajoutés comme clé dans un objet figure. La clé des images pointe vers une liste de figures, dont chacune sera parcourue lorsque l'animation est déclenchée.

Vous pouvez ajouter, lire et mettre en pause des boutons pour introduire une animation dans le graphique en ajoutant un updatemenus array à la mise en page.

"updatemenus": [{
   "type": "buttons", "buttons": [{
      "label": "Your Label", "method": "animate", "args": [frames]
   }]
}]

Dans l'exemple suivant, un scatter curvela trace est d'abord tracée. Puis ajouterframes qui est une liste de 50 Frame objects, chacun représentant un red markersur la courbe. Notez que leargs l'attribut du bouton est défini sur Aucun, ce qui fait que tous les cadres sont animés.

import numpy as np
t = np.linspace(-1, 1, 100)
x = t + t ** 2
y = t - t ** 2
xm = np.min(x) - 1.5
xM = np.max(x) + 1.5
ym = np.min(y) - 1.5
yM = np.max(y) + 1.5
N = 50
s = np.linspace(-1, 1, N)
#s = np.arange(0, math.pi*2, 0.1)
xx = s + s ** 2
yy = s - s ** 2
fig = go.Figure(
   data = [
      go.Scatter(x = x, y = y, mode = "lines", line = dict(width = 2, color = "blue")),
      go.Scatter(x = x, y = y, mode = "lines", line = dict(width = 2, color = "blue"))
   ],
   layout = go.Layout(
      xaxis=dict(range=[xm, xM], autorange=False, zeroline=False),
      yaxis=dict(range=[ym, yM], autorange=False, zeroline=False),
      title_text="Moving marker on curve",
      updatemenus=[
         dict(type="buttons", buttons=[dict(label="Play", method="animate", args=[None])])
      ]
   ),
   frames = [go.Frame(
      data = [
            go.Scatter(
            x = [xx[k]], y = [yy[k]], mode = "markers", marker = dict(
               color = "red", size = 10
            )
         )
      ]
   )
   for k in range(N)]
)
iplot(fig)

La sortie du code est indiquée ci-dessous -

Le marqueur rouge commencera à se déplacer le long de la courbe en cliquant play bouton.