Plotly - Aggiunta di pulsanti a discesa

Plotly fornisce un alto grado di interattività utilizzando diversi controlli nell'area di stampa - come pulsanti, menu a discesa e cursori ecc. Questi controlli sono incorporati con updatemenuattributo del layout della trama. Puoiadd button e il suo comportamento specificando il metodo da chiamare.

Esistono quattro metodi possibili che possono essere associati a un pulsante come segue:

restyle - modificare dati o attributi dei dati
relayout - modificare gli attributi del layout
update - modificare dati e attributi di layout
animate - avvia o metti in pausa un'animazione

Il restyle metodo dovrebbe essere usato quando modifying the data and data attributesdel grafico. Nell'esempio seguente, due pulsanti vengono aggiunti daUpdatemenu() metodo al layout con restyle metodo.

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

Valore di type la proprietà è buttonsper impostazione predefinita. Per eseguire il rendering di un elenco a discesa di pulsanti, modificare il tipo indropdown. Una traccia Box aggiunta all'oggetto Figura prima di aggiornare il suo layout come sopra. Il codice completo che esegue il renderingboxplot e violin plot a seconda del pulsante cliccato, è il seguente:

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)

L'output del codice è fornito di seguito:

Clicca su Violin per visualizzare la corrispondente Violin plot.

Come accennato in precedenza, il valore di type digitare Updatemenu() metodo è assegnato dropdownper visualizzare l'elenco a discesa dei pulsanti. La trama appare come di seguito -

Il updatedeve essere utilizzato quando si modificano i dati e le sezioni del layout del grafico. L'esempio seguente mostra come aggiornare e quali tracce vengono visualizzate aggiornando contemporaneamente gli attributi del layout, come il titolo del grafico. Due tracce Scatter corrispondenti asine and cos wave vengono aggiunti a Figure object. La traccia con visibileattribute come True verrà visualizzato sulla trama e altre tracce verranno nascoste.

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)

Inizialmente, Sine curvesarà mostrato. Se si fa clic sul secondo pulsante,cos trace appare.

Nota che chart title si aggiorna anche di conseguenza.

Per poter utilizzare animate metodo, dobbiamo aggiungerne uno o più Frames to the Figureoggetto. Insieme ai dati e al layout, è possibile aggiungere cornici come chiave in un oggetto figura. La chiave dei fotogrammi punta a un elenco di figure, ciascuna delle quali verrà visualizzata in sequenza quando viene attivata l'animazione.

È possibile aggiungere, riprodurre e mettere in pausa i pulsanti per introdurre l'animazione nel grafico aggiungendo un file updatemenus array al layout.

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

Nell'esempio seguente, a scatter curvela traccia viene prima tracciata. Quindi aggiungereframes che è un elenco di 50 Frame objects, ciascuno rappresentante un file red markersulla curva. Nota che ilargs l'attributo del pulsante è impostato su Nessuno, a causa del quale tutti i fotogrammi sono animati.

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)

L'output del codice è indicato di seguito:

Il marker rosso inizierà a muoversi lungo la curva facendo clic play pulsante.

↰ Previous page Next page ↱

Plotly - Aggiunta di pulsanti a discesa

Plotly Tutorial