Plotly-スライダーコントロール

Plotlyには便利な Slider があり、レンダリングされたプロットの下部にあるコントロールのノブをスライドすることで、プロットの*データ/スタイル*のビューを変更できます。

スライダーコントロール*は、次のようなさまざまなプロパティで構成されています-

コントロール上のノブのスライド位置を定義するには、* stepsプロパティ*が必要です。
メソッドプロパティ*は、 restyle |再レイアウト|アニメーション|更新| skip、デフォルトは *restyle です。
* argsプロパティ*は、スライド上のメソッドで設定された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 ^ th ^正弦波*トレースが表示されます。下部の水平コントロールを横切ってノブをスライドしてみてください。以下のように周波数が変化します。

正弦波トレース

Plotly-slider-control

Plotly-スライダーコントロール