Plotly - Control deslizante

Plotly tiene una conveniente Slider que se puede utilizar para cambiar la vista de data/style de una parcela deslizando una perilla en el control que se coloca en la parte inferior de la parcela renderizada.

Slider control se compone de diferentes propiedades que son las siguientes:

  • steps property es necesario para definir las posiciones deslizantes de la perilla sobre el control.

  • method property tiene valores posibles como restyle | relayout | animate | update | skip, por defecto es restyle.

  • args property establece los valores de los argumentos que se pasarán al método Plotly establecido en el método de la diapositiva.

Ahora implementamos un control deslizante simple en un diagrama de dispersión que variará la frecuencia de sine wavemientras la perilla se desliza por el control. El control deslizante está configurado para tener 50 pasos. Primero agregue 50 trazas de curva de onda sinusoidal con frecuencia creciente, todas menos la décima traza configuradas como visibles.

Luego, configuramos cada paso con restylemétodo. Para cada paso, todos los demás objetos de paso tienen la visibilidad configurada enfalse. Finalmente, actualice el diseño del objeto Figure inicializando la propiedad de los controles deslizantes.

# 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)

Para empezar, 10th sine waveel rastro será visible. Intente deslizar la perilla a través del control horizontal en la parte inferior. Verá que la frecuencia cambia como se muestra a continuación.