Plotly - Adicionando menu suspenso de botões

Plotly fornece alto grau de interatividade pelo uso de diferentes controles na área de plotagem - como botões, menus suspensos e controles deslizantes, etc. Esses controles são incorporados com updatemenuatributo do layout do lote. Você podeadd button e seu comportamento especificando o método a ser chamado.

Existem quatro métodos possíveis que podem ser associados a um botão da seguinte forma -

restyle - modificar dados ou atributos de dados
relayout - modificar atributos de layout
update - modificar dados e atributos de layout
animate - iniciar ou pausar uma animação

o restyle método deve ser usado quando modifying the data and data attributesdo gráfico. No exemplo a seguir, dois botões são adicionados porUpdatemenu() método para o layout com 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 propriedade é buttonspor padrão. Para renderizar uma lista suspensa de botões, altere o tipo paradropdown. Um traço de caixa adicionado ao objeto de figura antes de atualizar seu layout como acima. O código completo que renderizaboxplot e violin plot dependendo do botão clicado, é o seguinte -

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)

A saída do código é fornecida abaixo -

Clique em Violin botão para exibir o correspondente Violin plot.

Como mencionado acima, o valor de type chave em Updatemenu() método é atribuído dropdownpara exibir a lista suspensa de botões. O gráfico aparece como abaixo -

o updatedeve ser usado ao modificar as seções de dados e layout do gráfico. O exemplo a seguir demonstra como atualizar e quais traços são exibidos ao atualizar simultaneamente os atributos de layout, como o título do gráfico. Dois rastros Scatter correspondentes asine and cos wave são adicionados a Figure object. O traço com visívelattribute Como True será exibido no gráfico e outros traços serão ocultados.

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. Se clicado no segundo botão,cos trace parece.

Observe que chart title também atualiza em conformidade.

Para ser usado animate método, precisamos adicionar um ou mais Frames to the Figureobjeto. Junto com os dados e o layout, os quadros podem ser adicionados como uma chave em um objeto de figura. Os quadros-chave apontam para uma lista de figuras, cada uma das quais será percorrida quando a animação for acionada.

Você pode adicionar, reproduzir e pausar botões para apresentar a animação no gráfico, adicionando um updatemenus array para o layout.

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

No exemplo a seguir, um scatter curveo traço é primeiro traçado. Então adicioneframes que é uma lista de 50 Frame objects, cada um representando um red markerna curva. Observe que oargs O atributo do botão é definido como Nenhum, devido ao qual todos os quadros são 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)

A saída do código é declarada abaixo -

O marcador vermelho começará a se mover ao longo da curva ao clicar play botão.

↰ Previous page Next page ↱