Plotly - 滑塊控制元件

Plotly 有一個方便的滑塊，可以透過滑動位於渲染圖底部控制元件上的旋鈕來更改圖表的資料/樣式檢視。

滑塊控制元件由不同的屬性組成，如下所示：

• steps 屬性用於定義旋鈕在控制元件上的滑動位置。

• method 屬性的可能值為restyle | relayout | animate | update | skip，預設值為restyle。

• args 屬性設定要傳遞給滑動時在 method 中設定的 Plotly 方法的引數值。

我們現在在一個散點圖上部署一個簡單的滑塊控制元件，它將隨著旋鈕沿控制元件滑動而改變正弦波的頻率。滑塊配置為具有 50 個步長。首先新增 50 條正弦波曲線軌跡，頻率遞增，除第 10 條軌跡外，所有軌跡都設定為可見。

然後，我們使用restyle方法配置每個步驟。對於每個步驟，所有其他步驟物件的可見性都設定為false。最後，透過初始化 sliders 屬性來更新 Figure 物件的佈局。

# Add traces, one for each slider step
for step in np.arange(0, 5, 0.1):
fig.add_trace(
   go.Scatter(
      visible = False,
      line = dict(color = "blue", width = 2),
      name = "𝜈 = " + str(step),
      x = np.arange(0, 10, 0.01),
      y = np.sin(step * np.arange(0, 10, 0.01))
   )
)
fig.data[10].visible=True

# Create and add slider
steps = []
for i in range(len(fig.data)):
step = dict(
   method = "restyle",
   args = ["visible", [False] * len(fig.data)],
)
step["args"][1][i] = True # Toggle i'th trace to "visible"
steps.append(step)
sliders = [dict(active = 10, steps = steps)]
fig.layout.update(sliders=sliders)
iplot(fig)

首先，將顯示第 10 條正弦波軌跡。嘗試滑動底部水平控制元件上的旋鈕。您將看到頻率如下所示發生變化。