Plotly - Contrôle du curseur

Plotly a un pratique Slider qui peut être utilisé pour changer la vue de data/style d'un tracé en faisant glisser un bouton sur le contrôle qui est placé en bas du tracé rendu.

Slider control se compose de différentes propriétés qui sont les suivantes -

  • steps property est nécessaire pour définir les positions de glissement du bouton sur la commande.

  • method property a des valeurs possibles comme restyle | relayout | animate | update | skip, la valeur par défaut est restyle.

  • args property définit les valeurs d'arguments à transmettre à la méthode Plotly définie dans method on slide.

Nous déployons maintenant un contrôle de curseur simple sur un nuage de points qui fera varier la fréquence de sine wavependant que le bouton glisse le long de la commande. Le curseur est configuré pour avoir 50 étapes. Ajoutez d'abord 50 traces de courbe sinusoïdale avec une fréquence croissante, toutes sauf la 10e trace définies sur visibles.

Ensuite, nous configurons chaque étape avec restyleméthode. Pour chaque étape, la visibilité de tous les autres objets d'étape est définie surfalse. Enfin, mettez à jour la disposition de l'objet Figure en initialisant la propriété sliders.

# Add traces, one for each slider step
for step in np.arange(0, 5, 0.1):
fig.add_trace(
   go.Scatter(
      visible = False,
      line = dict(color = "blue", width = 2),
      name = " = " + str(step),
      x = np.arange(0, 10, 0.01),
      y = np.sin(step * np.arange(0, 10, 0.01))
   )
)
fig.data[10].visible=True

# Create and add slider
steps = []
for i in range(len(fig.data)):
step = dict(
   method = "restyle",
   args = ["visible", [False] * len(fig.data)],
)
step["args"][1][i] = True # Toggle i'th trace to "visible"
steps.append(step)
sliders = [dict(active = 10, steps = steps)]
fig.layout.update(sliders=sliders)
iplot(fig)

Pour commencer, 10th sine wavela trace sera visible. Essayez de faire glisser le bouton sur la commande horizontale en bas. Vous verrez la fréquence changer comme indiqué ci-dessous.