Âm mưu - Thêm nút thả xuống

Plotly cung cấp mức độ tương tác cao bằng cách sử dụng các điều khiển khác nhau trên khu vực vẽ đồ thị - chẳng hạn như các nút, trình đơn thả xuống và thanh trượt, v.v. Những điều khiển này được kết hợp với updatemenuthuộc tính của bố cục cốt truyện. Bạn có thểadd button và hành vi của nó bằng cách chỉ định phương thức được gọi.

Có bốn phương pháp khả thi có thể được liên kết với một nút như sau:

restyle - sửa đổi dữ liệu hoặc thuộc tính dữ liệu
relayout - sửa đổi các thuộc tính bố cục
update - sửa đổi dữ liệu và thuộc tính bố cục
animate - bắt đầu hoặc tạm dừng hoạt ảnh

Các restyle phương pháp nên được sử dụng khi modifying the data and data attributescủa đồ thị. Trong ví dụ sau, hai nút được thêm bởiUpdatemenu() phương pháp bố trí với restyle phương pháp.

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

Giá trị của type tài sản là buttonstheo mặc định. Để hiển thị danh sách các nút thả xuống, hãy thay đổi loại thànhdropdown. Dấu vết Hộp được thêm vào đối tượng Hình trước khi cập nhật bố cục của nó như trên. Mã hoàn chỉnh hiển thịboxplot và violin plot tùy thuộc vào nút được nhấp, như sau:

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)

Đầu ra của mã được đưa ra dưới đây:

Bấm vào Violin nút để hiển thị tương ứng Violin plot.

Như đã đề cập ở trên, giá trị của type chốt vào Updatemenu() phương pháp được chỉ định dropdownđể hiển thị danh sách các nút thả xuống. Cốt truyện xuất hiện như bên dưới -

Các updatephương pháp nên được sử dụng khi sửa đổi dữ liệu và phần bố trí của biểu đồ. Ví dụ sau minh họa cách cập nhật và dấu vết nào được hiển thị trong khi cập nhật đồng thời các thuộc tính bố cục, chẳng hạn như tiêu đề biểu đồ. Hai dấu vết Scatter tương ứng vớisine and cos wave được thêm vào Figure object. Dấu vết có thể nhìn thấyattribute như True sẽ được hiển thị trên cốt truyện và các dấu vết khác sẽ bị ẩn đi.

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)

Ban đầu, Sine curvesẽ được hiển thị. Nếu nhấp vào nút thứ hai,cos trace xuất hiện.

Lưu ý rằng chart title cũng cập nhật cho phù hợp.

Để sử dụng animate , chúng ta cần thêm một hoặc nhiều Frames to the Figurevật. Cùng với dữ liệu và bố cục, các khung có thể được thêm vào như một khóa trong một đối tượng hình. Các khung chính trỏ đến một danh sách các số liệu, mỗi số sẽ được quay vòng khi hoạt ảnh được kích hoạt.

Bạn có thể thêm, phát và tạm dừng các nút để giới thiệu hoạt ảnh trong biểu đồ bằng cách thêm updatemenus array vào bố cục.

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

Trong ví dụ sau, một scatter curvedấu vết đầu tiên được vẽ. Sau đó thêmframes đó là danh sách 50 Frame objects, mỗi đại diện cho một red markertrên đường cong. Lưu ý rằngargs thuộc tính của nút được đặt thành Không có, do đó tất cả các khung đều được làm động.

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)

Đầu ra của mã được nêu dưới đây:

Điểm đánh dấu màu đỏ sẽ bắt đầu di chuyển dọc theo đường cong khi nhấp vào play cái nút.