如何调整Dash图表坐标轴消除空白并保持XY轴比例一致？

问题描述 #

编写的Dash可视化脚本运行正常，但散点图X轴存在大量空白（数据X值范围0-15，轴却显示-50到60），尝试用fig.update_xaxes(range=[0, 15])设置轴范围无效，同时需要保持X轴与Y轴比例一致。

问题根源 #

你使用的scaleanchor='y'和scaleratio=1会强制Plotly按照Y轴比例自动调整X轴范围，这会覆盖手动设置的range参数，导致轴范围失效。

解决方案 #

方法一：用aspectratio结合constrain='domain'控制比例 #

这种方式可以先手动设置轴范围，再强制保持轴比例，不会覆盖手动范围设置。修改update_plot函数中的布局代码：

def update_plot(range_value):
    min_value, max_value = range_value

    filtered_data = data[(data['fr'] >= min_value) & (data['fr'] <= max_value)]

    hover_text_1 = [
        f'fr: {fr}<br>X1: {x:.2f}<br>Y1: {y:.2f}'
        for fr, x, y in zip(filtered_data['fr'], filtered_data['X1'], filtered_data['Y1'])
    ]
    hover_text_2 = [
        f'fr: {fr}<br>X2: {x:.2f}<br>Y2: {y:.2f}'
        for fr, x, y in zip(filtered_data['fr'], filtered_data['X2'], filtered_data['Y2'])
    ]

    fig = go.Figure()

    fig.add_trace(go.Scatter(
        x=filtered_data['X1'],
        y=filtered_data['Y1'],
        mode='markers',
        text=hover_text_1,
        name='(X1, Y1) Data'
    ))

    fig.add_trace(go.Scatter(
        x=filtered_data['X2'],
        y=filtered_data['Y2'],
        mode='markers',
        text=hover_text_2,
        name='(X2, Y2) Data'
    ))

    fig.update_layout(title_text='Data')
    # 手动设置X、Y轴范围，匹配你的数据区间
    fig.update_xaxes(range=[0, 15])
    fig.update_yaxes(range=[0, 25])  # Y轴数据是5-20，设置0-25保留少量留白
    # 设置等比例并约束轴范围在绘图区域内
    fig.update_layout(
        aspectratio=dict(x=1, y=1),
        xaxis=dict(constrain='domain'),
        yaxis=dict(constrain='domain')
    )

    return fig

方法二：保留scaleanchor并锁定轴范围 #

如果坚持使用scaleanchor，需要先设置autorange=False来锁定手动设置的轴范围，避免Plotly自动调整：

def update_plot(range_value):
    min_value, max_value = range_value

    filtered_data = data[(data['fr'] >= min_value) & (data['fr'] <= max_value)]

    hover_text_1 = [
        f'fr: {fr}<br>X1: {x:.2f}<br>Y1: {y:.2f}'
        for fr, x, y in zip(filtered_data['fr'], filtered_data['X1'], filtered_data['Y1'])
    ]
    hover_text_2 = [
        f'fr: {fr}<br>X2: {x:.2f}<br>Y2: {y:.2f}'
        for fr, x, y in zip(filtered_data['fr'], filtered_data['X2'], filtered_data['Y2'])
    ]

    fig = go.Figure()

    fig.add_trace(go.Scatter(
        x=filtered_data['X1'],
        y=filtered_data['Y1'],
        mode='markers',
        text=hover_text_1,
        name='(X1, Y1) Data'
    ))

    fig.add_trace(go.Scatter(
        x=filtered_data['X2'],
        y=filtered_data['Y2'],
        mode='markers',
        text=hover_text_2,
        name='(X2, Y2) Data'
    ))

    fig.update_layout(title_text='Data')
    # 设置轴范围并关闭自动调整
    fig.update_xaxes(range=[0, 15], autorange=False, scaleanchor='y', scaleratio=1)
    fig.update_yaxes(range=[0, 25], autorange=False)

    return fig

验证效果 #

修改后重新运行脚本，X轴会显示0-15的范围，同时X、Y轴保持1:1的比例，不会出现多余空白。

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