如何在Plotly图表中添加滑块 按petal_width值控制曲线显示

你可以通过按petal_width唯一值生成滑块步长、匹配轨迹可见性的方式实现需求，核心是不要按单条轨迹生成滑块步骤，而是按petal_width的取值做步骤，每个步骤同步控制所有关联该值的轨迹显示状态。

完整实现代码 #

import plotly.graph_objects as go
import plotly.express as px

if __name__ == '__main__':
    df = px.data.iris()
    df = df.iloc[0:10, :]
    # 映射顺序必须和下方data列表的轨迹顺序严格一一对应
    petal_width = [1.3, 1.4, 1.4]
    # 生成所有折线轨迹
    data = [
        go.Scatter(
            mode="lines+markers",
            x=df['sepal_width'],
            y=df['sepal_length'],
            name='petal_width=1.3 轨迹1'
        ),
        go.Scatter(
            mode="lines+markers",
            x=df['sepal_width'],
            y=df['sepal_length']+2,
            name='petal_width=1.4 轨迹2'
        ),
        go.Scatter(
            mode="lines+markers",
            x=df['sepal_width'],
            y=df['sepal_length'] + 3,
            name='petal_width=1.4 轨迹3'
        )
    ]

    fig = go.Figure(data=data)

    # 生成滑块步骤：取petal_width去重排序后的值作为滑块可选值
    slider_steps = []
    unique_pw = sorted(list(set(petal_width)))
    for pw_val in unique_pw:
        # 生成当前步的可见性列表：匹配当前petal_width值的轨迹设为可见，其余隐藏
        visible_arr = [pw == pw_val for pw in petal_width]
        step = dict(
            method="update",
            args=[
                {"visible": visible_arr},
                {"title": f"当前选中petal_width值: {pw_val}"}
            ],
            label=str(pw_val)
        )
        slider_steps.append(step)

    # 配置滑块样式，对齐官方示例效果
    sliders = [
        dict(
            active=0, # 默认选中最小的petal_width值
            currentvalue={"prefix": "petal_width: "},
            pad={"t": 50},
            steps=slider_steps
        )
    ]

    # 修正初始加载状态：和滑块默认选中值保持一致，避免初始全显的问题
    initial_visible = [pw == unique_pw[0] for pw in petal_width]
    for idx, trace in enumerate(fig.data):
        trace.visible = initial_visible[idx]

    fig.update_layout(
        sliders=sliders,
        title=f"当前选中petal_width值: {unique_pw[0]}"
    )

    # 输出为HTML文件，使用w模式避免多次运行重复追加内容
    with open("check.html", 'w') as f:
        f.write(fig.to_html(full_html=False, include_plotlyjs='cdn'))

关键配置说明 #

• 映射规则：petal_width列表的顺序必须和data列表的轨迹顺序完全对应，否则会出现值和曲线匹配错误的问题
• 可见性逻辑：每个滑块步长的visible参数是长度等于轨迹总数的布尔数组，所有关联当前petal_width值的轨迹都会被设为可见，比如选中1.4时，第2、3条轨迹的visible值均为True，会同步显示
• 状态对齐：代码单独配置了图表初始加载时的轨迹可见性，避免打开页面时所有曲线全部显示、和滑块选中状态不匹配的问题
• 样式适配：通过currentvalue设置滑块上方的当前值显示前缀，pad设置滑块和绘图区的间距，和参考示例的交互样式保持一致

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