Plotly - раскрывающийся список добавления кнопок

Plotly обеспечивает высокую степень интерактивности за счет использования различных элементов управления в области построения, таких как кнопки, раскрывающиеся списки, ползунки и т. Д. Эти элементы управления включены в updatemenuатрибут планировки сюжета. Вы можетеadd button и его поведение, указав вызываемый метод.

Существует четыре возможных метода, которые можно связать с кнопкой следующим образом:

restyle - изменять данные или атрибуты данных
relayout - изменить атрибуты макета
update - изменять атрибуты данных и макета
animate - запустить или приостановить анимацию

В restyle метод следует использовать, когда modifying the data and data attributesграфа. В следующем примере две кнопки добавляютсяUpdatemenu() метод к макету с restyle метод.

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

Значение type собственность buttonsпо умолчанию. Чтобы отобразить раскрывающийся список кнопок, измените тип наdropdown. Трассировка Box добавлена к объекту Figure перед обновлением его макета, как указано выше. Полный код, который отображаетboxplot и violin plot в зависимости от нажатой кнопки происходит следующее -

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)

Вывод кода приведен ниже -

Нажмите на Violin кнопку для отображения соответствующего Violin plot.

Как упоминалось выше, значение type ключ в Updatemenu() метод назначается dropdownдля отображения раскрывающегося списка кнопок. Сюжет выглядит следующим образом -

В updateМетод следует использовать при изменении данных и разделов макета графика. В следующем примере показано, как обновлять и какие трассировки отображаются при одновременном обновлении атрибутов макета, таких как заголовок диаграммы. Две трассы Scatter, соответствующиеsine and cos wave добавлены к Figure object. След с видимымattribute в виде True будет отображаться на графике, а другие следы будут скрыты.

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)

Первоначально, Sine curveбудет отображаться. Если нажать на вторую кнопку,cos trace появляется.

Обратите внимание, что chart title также обновляется соответственно.

Чтобы использовать animate метод, нам нужно добавить один или несколько Frames to the Figureобъект. Наряду с данными и компоновкой, кадры могут быть добавлены как ключ к объекту-фигуре. Ключевые кадры указывают на список фигур, каждая из которых будет циклически прокручиваться при запуске анимации.

Вы можете добавить кнопки воспроизведения и паузы, чтобы добавить анимацию в диаграмму, добавив updatemenus array к макету.

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

В следующем примере scatter curveтрасса сначала наносится. Затем добавьтеframes это список 50 Frame objects, каждый из которых представляет собой red markerна кривой. Обратите внимание, чтоargs для атрибута кнопки установлено значение Нет, благодаря чему все кадры анимируются.

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)

Вывод кода указан ниже -

Красный маркер начнет двигаться по кривой при нажатии play кнопка.