Plotly: menú desplegable de botones de adición

Plotly proporciona un alto grado de interactividad mediante el uso de diferentes controles en el área de trazado, como botones, menús desplegables y controles deslizantes, etc. Estos controles se incorporan con updatemenuatributo del diseño de la parcela. Usted puedeadd button y su comportamiento especificando el método a llamar.

Hay cuatro métodos posibles que se pueden asociar con un botón de la siguiente manera:

restyle - modificar datos o atributos de datos
relayout - modificar atributos de diseño
update - modificar datos y atributos de diseño
animate - iniciar o pausar una animación

los restyle El método debe usarse cuando modifying the data and data attributesdel gráfico. En el siguiente ejemplo, se agregan dos botones medianteUpdatemenu() método al diseño con restyle método.

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" )]
))

Valor de type la propiedad es buttonspor defecto. Para representar una lista desplegable de botones, cambie el tipo adropdown. Un trazo de caja agregado al objeto Figura antes de actualizar su diseño como se muestra arriba. El código completo que renderizaboxplot y violin plot dependiendo del botón en el que se haga clic, es el siguiente:

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 salida del código se da a continuación:

Haga clic en Violin para mostrar el correspondiente Violin plot.

Como se mencionó anteriormente, el valor de type teclear Updatemenu() se asigna el método dropdownpara mostrar la lista desplegable de botones. La trama aparece como a continuación:

los updateSe debe utilizar este método al modificar las secciones de datos y diseño del gráfico. El siguiente ejemplo demuestra cómo actualizar y qué trazas se muestran al mismo tiempo que se actualizan los atributos de diseño, como el título del gráfico. Dos trazas de dispersión correspondientes asine and cos wave se agregan a Figure object. El rastro con visibleattribute como True se mostrará en el gráfico y se ocultarán otros rastros.

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)

Inicialmente, Sine curveserá mostrado. Si hace clic en el segundo botón,cos trace aparece.

Tenga en cuenta que chart title también se actualiza en consecuencia.

Para usar animate método, necesitamos agregar uno o más Frames to the Figureobjeto. Junto con los datos y el diseño, los marcos se pueden agregar como clave en un objeto de figura. Los puntos clave de los fotogramas indican una lista de figuras, cada una de las cuales pasará por un ciclo cuando se active la animación.

Puede agregar, reproducir y pausar botones para introducir animación en el gráfico agregando un updatemenus array al diseño.

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

En el siguiente ejemplo, un scatter curvela traza se traza primero. Luego añadeframes que es una lista de 50 Frame objects, cada uno representa un red markeren la curva. Tenga en cuenta que elargs El atributo del botón se establece en Ninguno, por lo que todos los fotogramas están animados.

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 salida del código se indica a continuación:

El marcador rojo comenzará a moverse a lo largo de la curva al hacer clic play botón.

↰ Previous page Next page ↱