如何在 Plotly 中获得类似于 ipywidgets 的滑块？答案

【问题标题】：How can I get a slider similar to ipywidgets in Plotly?如何在 Plotly 中获得类似于 ipywidgets 的滑块？
【发布时间】：2022-01-01 22:17:38
【问题描述】：

我有一个简单的函数，它绘制一条水平线到某个函数中定义的 x 值，如下所示：

def plot_lines(x):

    plt.hlines(y = 10,
              xmin = 0,
              xmax = x)
    
    plt.xlim(0, 10)

    plt.show()

使用 ipywidgets，我可以获得一个滑块，其中 x 是我与之交互的值。如下所示

from ipywidgets import *

x = widgets.IntSlider(value = 2,
                     min = 0, 
                     max = 10,
                     )

interact(plot_lines, x = x)

我的输出如下所示：我可以拖动滑块来更改 x 的值。结果，情节相应地发生了变化。

我在这里定义了一个函数plot_lines，我传递给x的参数作为一个交互参数。

我对 Plotly 比较陌生。是否可以在 Plotly 中以类似的方式获得滑块？这个简单函数的等效实现在 Plotly 中会是什么样子？

【问题讨论】：

剧情：Slider + Basic Callback
剧情：Simple Slider Control
python - Interactive plot with Slider using Plotly - Stack Overflow

标签： python python-3.x plotly slider plotly-dash

【解决方案1】：

好的。我自己找到了解决方案：

def hlines(x):
    
    fig1 = go.FigureWidget()
    
    fig1.add_hline(y = 10,
                   x0 = 0,
                   #Normalize value for x between min and max
                   x1 = x,
                   line_color = "blue"
             )
    
    #Update ranges for x and y axis
    fig1.update_xaxes(range=[0, 10])
    fig1.update_yaxes(range=[0, 15])

    fig1.show()

#x takes normalized value.
interact(hlines, x = 0.5)

需要注意的一点是，在 Plotly 中，x 似乎在 x 轴的最小值和最大值之间取归一化值。

【讨论】：

【解决方案2】：

有选择

原生剧情

使用 范围滑块

import numpy as np
import plotly.express as px
fig = px.line(x=np.linspace(1,10,20), y=np.sin(np.linspace(1,10,20)))
fig.update_layout(xaxis={"rangeslider":{"autorange":True}, "range":[1,5]})

ipywidgets

更新 xaxis 范围

import numpy as np
import plotly.express as px
from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets

def widget_slider(x):
    return fig.update_layout(xaxis_range=[1,x])

fig = px.line(x=np.linspace(1,10,20), y=np.sin(np.linspace(1,10,20)))

interact(widget_slider, x=widgets.IntSlider(min=1, max=10, step=1, value=5))

【讨论】：