Plotly Python：求助实现滑块控制水平线条的添加与移除

问题背景 #

我现有一段Python代码可向Plotly图表添加一组水平线条及配套矩形区域：

for v in range(len(sortadlist)):
        fig.add_hline(y=sortadlist[v][0], line_color='brown', line_width=1.5, row=1, col=1)
        fig.add_shape(type="rect",
                      y0=round(sortadlist[v][0],2)-.3, y1=round(sortadlist[v][0],2)+.3, x0=-1, x1=len(df),
                      fillcolor="darkcyan",
                      opacity=0.15)

希望通过滑块控制水平线条的添加与移除：滑块右移时增加线条，左移时减少线条。

解决方案 #

Plotly的滑块控件可通过update_layout实现，核心思路是预先生成所有元素，再通过滑块步骤控制不同数量元素的可见性：

完整代码示例

import plotly.graph_objects as go
import pandas as pd

# 示例数据（请替换为你的实际数据）
df = pd.DataFrame({'x': range(10), 'y': range(10)})
sortadlist = [(2,), (5,), (7,)]  # 存储水平线y值的列表

# 初始化图表并添加基础轨迹
fig = go.Figure()
fig.add_trace(go.Scatter(x=df['x'], y=df['y'], mode='lines'))

total_elements = len(sortadlist)

# 预先生成所有水平线和矩形区域，初始设为不可见
for idx in range(total_elements):
    # 添加水平线
    fig.add_hline(
        y=sortadlist[idx][0],
        line_color='brown',
        line_width=1.5,
        row=1,
        col=1,
        visible=False
    )
    # 添加配套矩形
    y_val = round(sortadlist[idx][0], 2)
    fig.add_shape(
        type="rect",
        y0=y_val - 0.3,
        y1=y_val + 0.3,
        x0=-1,
        x1=len(df),
        fillcolor="darkcyan",
        opacity=0.15,
        visible=False
    )

# 构建滑块步骤：每个步骤对应显示前N组元素
slider_steps = []
for count in range(total_elements + 1):
    # 构建可见性数组：第一个元素对应基础轨迹，后续依次对应每条水平线和矩形
    visible_status = [True]  # 保持基础轨迹始终可见
    for idx in range(total_elements):
        visible_status.append(idx < count)  # 水平线可见性
        visible_status.append(idx < count)  # 矩形可见性
    
    slider_steps.append({
        "method": "update",
        "args": [{"visible": visible_status}],
        "label": f"{count} 组"
    })

# 将滑块添加到图表布局
fig.update_layout(
    sliders=[{
        "active": 0,
        "currentvalue": {"prefix": "显示数量: "},
        "pad": {"t": 50},
        "steps": slider_steps
    }]
)

fig.show()

关键说明

1. 预生成元素：先创建所有需要的水平线和矩形，初始状态设为visible=False，避免动态添加/删除元素的性能问题
2. 滑块步骤控制：每个滑块步骤对应一组可见性配置，通过visible数组精准控制每个元素的显示状态
3. 基础轨迹可见性：确保图表中的基础轨迹（如示例中的折线图）始终可见，所以visible_status第一个元素设为True
4. 交互体验优化：通过currentvalue显示当前选中的数量，让用户清晰了解滑块对应的状态

内容的提问来源于stack exchange，提问作者smith