Plotly使用范围滑块时实现Y轴自动缩放的问题求助

当使用Plotly的x-range slider切换数据区间时，Y轴无法动态自动缩放，即使设置autorange=True和fixedrange=False也无效果，以下是针对不同场景的解决方案：

场景1：Python环境下使用FigureWidget（如Jupyter） #

通过监听滑块的布局变化事件，手动计算当前显示数据的Y轴范围并更新：

import plotly.graph_objects as go
import numpy as np

# 生成测试数据
x = np.linspace(0, 100, 1000)
y = np.sin(x) + np.random.randn(1000)*0.2

fig = go.FigureWidget(data=go.Scatter(x=x, y=y))
fig.update_layout(
    xaxis=dict(rangeslider=dict(visible=True), autorange=True),
    yaxis=dict(autorange=True, fixedrange=False)
)

# 监听X轴范围变化，更新Y轴
def update_y_range(layout, xrange):
    if xrange is not None:
        mask = (x >= xrange[0]) & (x <= xrange[1])
        y_subset = y[mask]
        fig.update_yaxes(range=[y_subset.min(), y_subset.max()])

fig.layout.on_change(update_y_range, 'xaxis.range')

fig.show()

场景2：Python Dash应用 #

利用Dash的回调机制，监听滑块触发的布局变化，动态计算Y轴范围：

import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go
import numpy as np

x = np.linspace(0, 100, 1000)
y = np.sin(x) + np.random.randn(1000)*0.2

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(
        id='slider-graph',
        figure=go.Figure(
            data=go.Scatter(x=x, y=y),
            layout=go.Layout(
                xaxis=dict(rangeslider=dict(visible=True)),
                yaxis=dict(autorange=True)
            )
        )
    )
])

@app.callback(
    Output('slider-graph', 'figure'),
    Input('slider-graph', 'relayoutData'),
    prevent_initial_call=True
)
def update_y_axis(relayout_data):
    fig = go.Figure(go.Scatter(x=x, y=y))
    fig.update_layout(xaxis=dict(rangeslider=dict(visible=True)))
    
    if 'xaxis.range[0]' in relayout_data and 'xaxis.range[1]' in relayout_data:
        x_min = float(relayout_data['xaxis.range[0]'])
        x_max = float(relayout_data['xaxis.range[1]'])
        mask = (x >= x_min) & (x <= x_max)
        fig.update_yaxes(range=[y[mask].min(), y[mask].max()])
    else:
        fig.update_yaxes(autorange=True)
    
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

场景3：纯前端Plotly.js #

监听plotly_relayout事件，计算当前显示数据的Y范围并更新图表：

// 生成测试数据
const x = Array.from({length: 1000}, (_, i) => i*0.1);
const y = x.map(val => Math.sin(val) + Math.random()*0.4 - 0.2);

const trace = {x: x, y: y, type: 'scatter'};
const layout = {
    xaxis: {rangeslider: {visible: true}, autorange: true},
    yaxis: {autorange: true, fixedrange: false}
};

Plotly.newPlot('myDiv', [trace], layout);

// 监听滑块拖动事件
document.getElementById('myDiv').on('plotly_relayout', function(eventData) {
    if (eventData['xaxis.range[0]'] && eventData['xaxis.range[1]']) {
        const xMin = parseFloat(eventData['xaxis.range[0]']);
        const xMax = parseFloat(eventData['xaxis.range[1]']);
        
        const ySubset = y.filter((_, idx) => x[idx] >= xMin && x[idx] <= xMax);
        const yMin = Math.min(...ySubset);
        const yMax = Math.max(...ySubset);
        
        Plotly.relayout('myDiv', {'yaxis.range': [yMin, yMax]});
    }
});

为什么默认设置不生效？ #

Plotly默认的range slider仅对X轴数据做视觉过滤，不会触发Y轴的自动范围重计算。autorange=True仅在图表初始化、数据更新时生效，滑块拖动属于布局变更，不会触发该逻辑，因此需要手动监听事件并更新Y轴范围。

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