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

Question

我有一个简单的函数，它绘制一条水平线到某个函数中定义的 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 中会是什么样子？

Answer 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 轴中取最小值和最大值之间的归一化值。

Answer 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

更新x轴范围

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

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

How can I get a slider similar to ipywidgets in Plotly?

python

slider

python-3.x

plotly

plotly-dash

原生剧情

ipywidgets