Dash应用中Surface Plot未显示全部X轴值的问题求助

1. 强制显示全部X轴范围 #

Plotly默认的自动轴范围可能会截断部分X值，你可以手动指定X轴的区间，确保所有值都被包含：

• 在update_layout中设置xaxis.range为你的X值的最小和最大值（即[50, 150]），同时关闭自动范围避免被覆盖。

2. 增大绘图区域尺寸 #

绘图区域过小的问题可以从两方面调整：

• 直接在图表布局中设置height和width参数，固定图表尺寸；
• 通过margin参数减少四周留白，让绘图区域占比更高；
• 也可以在dcc.Graph组件中通过style属性设置百分比尺寸，适配不同屏幕的响应式布局。

完整示例代码 #

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

# 你的X、Y轴数据
x_vals = [50, 60, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 140, 150]
y_vals = [1, 3, 6, 12, 24]
# 替换为你的真实Z数据
z_data = np.random.rand(len(y_vals), len(x_vals))

# 创建曲面图
fig = go.Figure(data=[go.Surface(z=z_data, x=x_vals, y=y_vals)])

# 调整布局：显示全部X轴+增大绘图区域
fig.update_layout(
    xaxis=dict(
        range=[min(x_vals), max(x_vals)],
        autorange=False
    ),
    height=800,  # 设置图表高度
    width=1200,  # 设置图表宽度
    margin=dict(l=20, r=20, t=30, b=30)  # 缩小边距
)

# Dash应用布局
app = dash.Dash(__name__)
app.layout = html.Div([
    # 通过style让图表占满容器的90%高度和100%宽度
    dcc.Graph(figure=fig, style={'height': '90vh', 'width': '100%'})
])

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

注意事项 #

• 检查代码中是否有其他xaxis相关设置，避免参数冲突导致范围不生效；
• 若需要适配不同设备，优先使用dcc.Graph的百分比尺寸设置，而非固定像素值。

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