如何为Plotly Python的Waterfall图表实现Range Slider？

可行，有两种方案可以实现类似原生Plotly Range Slider的简洁交互体验： #

方案1：转换x轴类型，启用原生Range Slider #

Plotly的原生Range Slider仅对数值/时间类型的x轴生效，Waterfall默认使用分类x轴，只需将分类标签映射为数值索引，再配置x轴即可实现原生Range Slider：

import plotly.graph_objects as go

# 原始数据
labels = ["初始值", "收入A", "收入B", "支出X", "支出Y", "最终值"]
values = [100, 30, 20, -15, -25, None]
measure = ["absolute", "relative", "relative", "relative", "relative", "total"]

# 将分类标签映射为数值索引
x_numeric = list(range(len(labels)))

# 创建Waterfall图，使用数值型x轴
fig = go.Figure(go.Waterfall(
    x=x_numeric,
    y=values,
    measure=measure,
    textposition="outside",
    text=labels  # 显示原始分类标签作为柱子文本
))

# 配置x轴：显示原始标签、设置数值类型、启用Range Slider
fig.update_xaxes(
    tickmode="array",
    tickvals=x_numeric,
    ticktext=labels,
    type="linear",
    rangeslider=dict(visible=True)
)

fig.update_layout(title="带原生Range Slider的Waterfall图表")
fig.show()

此方案完全复用Plotly原生Range Slider的交互逻辑（范围选择、迷你图预览），体验和常规图表一致。

方案2：优化ipywidgets滑块的样式与布局 #

如果不想修改x轴结构，可以调整IntRangeSlider的尺寸和位置，让它更接近原生Range Slider的使用体验：

import ipywidgets as widgets
from IPython.display import display
import plotly.graph_objects as go

# 原始Waterfall图
labels = ["初始值", "收入A", "收入B", "支出X", "支出Y", "最终值"]
values = [100, 30, 20, -15, -25, None]
measure = ["absolute", "relative", "relative", "relative", "relative", "total"]

fig = go.Figure(go.Waterfall(
    x=labels,
    y=values,
    measure=measure
))

# 创建宽幅滑块，匹配图表宽度
range_slider = widgets.IntRangeSlider(
    min=0,
    max=len(labels)-1,
    value=[0, len(labels)-1],
    layout=widgets.Layout(width="800px")  # 根据图表实际宽度调整
)

# 定义滑块更新逻辑
def update_chart_range(change):
    start_idx, end_idx = change["new"]
    # 调整x轴范围（分类轴需偏移0.5以完整显示首尾柱子）
    fig.update_xaxes(range=[start_idx - 0.5, end_idx + 0.5])

range_slider.observe(update_chart_range, names="value")

# 将滑块置于图表下方，模拟原生Range Slider位置
display(widgets.VBox([fig, range_slider]))

此方案保留原有分类x轴，通过调整滑块宽度和布局位置提升操作便捷性。

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